css 부동 학습

부동의 최초의 디자인은 서라운드 문자를 만드는 데 쓰인다.
현대 브라우저에서 (i6, 7 제외) 부동 내용은 부모 용기를 받치지 않습니다.
1: 블록 요소가 IE6,7 아래에 부동하면 두 배의margin 버그가 발생합니다.display:inline.
2:ie6,7 아래 같은 줄의 원소 오차 해결 방법, 모두 변동
3:ie6,7에서 리 내용의 부동이 몇 px의 간극을 형성하고 해결 방법:vertical-align:top/middle.2: 컨텐트 모두 부동
요소가 부동하면 기본적으로 맨 위에 정렬됩니다.
4: 그림 간격 문제: 1:display:block 추가, 그러나 이렇게 하면 레이아웃에 영향을 미칠 수 있음, 2:vertical-align
5:ie6에서 최소 고도 문제, 해결 방법:overflow:hidden
6:ie6 아래 그림 틈새 생성, 해결 방법: 이 BUG를 해결하는 방법도 많은데 html의 레이아웃을 바꾸거나 display:block으로 정의하거나vertical-align 속성 값을vertical-align:top | bottom | middle | text-bottom으로 정의할 수 있다
부모 용기의 글꼴 크기를 0으로 설정할 수 있습니다. font-size:0
7:ie6 아래 빈 라벨의 최소 높이는 19px이고, 빈div 하나가 0에서 19px로 설정되면 IE6 아래 높이는 기본적으로 19PX입니다.
예:.c{background-color:#f00;height:0px;/*20px보다 작은 높이를 주어라*/}
19PX로 기본으로 설정하지 않으면0PX라면 3가지 해결 방법이 있다. 1.css에 오버플로우:hidden 추가하기;2.div에 주석을 달면 3.css에 라인-height:0 추가;그리고 div에 #nbsp;,(#&로 변경)
8:IE6, 7 아래 리의 간극은 IE6, 7 아래 리 자체가 부동하지 않지만 리의 내용이 부동할 때 리 아래 몇 px의 간극이 생긴다.
해결 방법: 1.리에 부동 2.리에 vertical-align:top 추가하기;
9:명확한 부동: 해결 방법: 1:(.clear {zoom:1},clear:after:{content:"",display:block;clear:both})
2: BFC 부동 BFC의 정의 지우기
10: 계산은 반드시 정확하게 해야 한다. 내용의 넓이가 우리가 설정한 넓이를 초과하지 않도록 해야 한다.
 
IE6에서는 설정된 너비가 확장됩니다.
11:IE6 원소에 부동, 폭에 내용을 펼칠 필요가 있으면 안의 블록 원소에 부동
IE6, 7에서 원소가 부동을 통해 같은 줄에 있으면 이 줄의 원소를 모두 부동하게 한다
탭 삽입 규범에 주의하십시오. 그렇지 않으면 문제가 생기기 쉽습니다
IE6에서 최소 높이 문제
IE6에서 원소의 높이가 19px보다 작을 때 19px로 처리된다
 
해결 방법:overflow:hidden;
1px dotted는 IE6에서 지원되지 않습니다.
해결 방법: 배경 바둑판식 배열
IE6에서 Margin 전달을 해결하려면haslayout을 터치해야 합니다
 
IE6 하부 레벨에 경계가 있을 때 하위 요소의 margin 값이 사라집니다
 
 
해결 방법: 부급haslayout 터치
IE6 하위 쌍무거리 BUG
 
IE6에서 블록 요소는 부동과 가로의 마진 값이 있고 가로의 마진 값은 두 배로 확대됩니다
 
 
해결 방법:display:inline;
margin-right 한 줄 오른쪽에 있는 첫 번째 요소는 쌍무 거리가 있다
 
 
margin-left 한 줄 왼쪽의 첫 번째 요소는 쌍무 간격이 있다
IE6, 7에서 리 자체는 움직이지 않지만 리의 내용은 변하지 않고 리 아래에 틈이 생긴다
해결 방법:
1. 리 띄우기
 
2. 리에 vertical-align 추가
IE6, 7에서 리 자체는 움직이지 않지만 리의 내용은 변하지 않고 리 아래에 틈이 생긴다
해결 방법:
1. 리 띄우기
2. 리에 vertical-align 추가
 
 
IE6에서 최소 고도 문제가 리의 간극 문제와 공존할 때 리에 부동을 가한다
한 줄의 하위 원소가 차지하는 폭의 합과 부급의 폭의 차이가 3px를 초과하거나 줄 상태에 불만이 있을 때 마지막 줄의 하위 원소의 하margin은IE6에서 효력을 상실합니다
IE6의 텍스트 오버플로우 BUG
    
하위 원소의 너비와 부급의 너비의 차이가 3px보다 작을 때 두 부동 원소 사이에 주석이나 내장 원소가 있다
    
 
해결 방법:div로 주석이나 내장 요소를div로 싸기
 
부동 요소와 절대 포지셔닝 요소가 병렬 관계일 때 IE6에서 절대 포지셔닝 요소는 사라집니다
해결 방법:
 
포지셔닝 원소 외 빵 개div
IE6, 7에서 하위 원소가 상대적으로 위치를 정하면 부모급의overflow는 하위 원소를 감싸지 못한다
 
 
해결 방법: 부급에도 상대적인 포지셔닝을 가한다
IE6에서 절대 포지셔닝 원소의 부급 폭이 홀수일 때 원소의right값과bottom값은 1px의 편차가 있습니다
 
IE6, 7에서 입력 형식의 폼 컨트롤 상하에 각각 1px의 간격이 있습니다
 
해결 방법: input에 부동
 
IE6, 7에 형식의 폼 컨트롤을 입력하고border:none;
 
해결 방법: input의 배경을 초기화합니다
 
IE6, 7에서 형식의 폼 컨트롤을 입력할 때 배경 그림이 함께 이동합니다
 
해결 방법: 배경을 부급에 추가
 
위치:
PageY=clientY+scrollTop-clientTop
는 W3C CSS 2.1 사양에서 요소의 컨텐트 위치 지정 방법과 다른 요소와의 관계 및 상호 작용을 결정하는 개념입니다.
Block Formatting Context가 만들어진 요소 중 하위 요소는 하나씩 배치됩니다.수직 방향에서 그들의 출발점은 블록의 꼭대기를 포함하고 두 인접한 원소 간의 수직 거리는'margin'특성에 달려 있다.블록 레벨 요소와 인접한 블록 레벨 요소의 수직 여백은 Block Formatting Context에서 축소됩니다(collapse).
Block Formatting Context에서는 각 요소의 왼쪽 바깥쪽이 블록이 포함된 왼쪽(오른쪽에서 왼쪽으로 포맷되고 오른쪽 바깥쪽이 오른쪽으로 닿는 경우)에 부동이 있더라도 (요소의 내용 영역이 부동으로 인해 압축되지만 이 요소가 새 Block Formatting Context를 만들지 않는 한) 부동이 있습니다.
BFC란 무엇인가?
시각화된 레이아웃과 관련될 때 Block Formatting Context는 HTML 요소가 이 환경에서 일정한 규칙에 따라 레이아웃되는 환경을 제공합니다.한 환경의 요소는 다른 환경의 레이아웃에 영향을 주지 않습니다.예를 들어 부동 원소는 BFC를 형성하는데 부동 원소 내부의 하위 원소는 주로 이 부동 원소의 영향을 받고 두 부동 원소 사이에는 서로 영향을 주지 않는다.여기에는 BFC가 하나의 독립된 행정 단위라는 뜻과 약간 비슷하다.
BFC 구성 방법
float의 값은 none이 아닙니다
오버플로우의 값은 visible이 아닙니다
display의 값은 table-cell, table-caption, inline-block 중 하나입니다.
position의 값은 relative 및 static이 아닙니다
BFC의 역할
1. 부동원소와 중첩되지 않는다
만약에 부동 원소 뒤에 비부동 원소가 따라가면 덮어쓰는 현상이 발생하고 많은 적응된 두 개의 난간 구조가 이렇게 한다.다음 그림의 효과

<div style="float:left; border: 2px solid red"> 123</div>
<p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
The quick brown fox jumped over the  4seohunt.com lazy  dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
</p>

2. 요소 내부 부동 제거
부원소를 BFC로 설정하면 부동을 정리할 수 있다. 가장 흔히 볼 수 있는 방법은 부원소에overflow:hidden 스타일을 설정하고 IE6에zoom:1을 더하면 된다(IE Haslayout).
3. 중첩된 요소Margin 여백 축소 문제 해결
BFC의 정의에 따르면 같은 BFC에 속할 때만 두 원소가 수직 Margin의 중첩이 발생할 수 있다. 이것은 인접 원소를 포함하고 덧붙인 원소를 포함하는데 그들 사이에 가로막힘(예를 들어 테두리, 비공개 내용,padding 등)이 없으면 Margin이 중첩된다.
따라서 Margin의 중첩 문제를 해결하려면 같은 BFC에 두지 않으면 된다. 그러나 두 개의 인접 원소에 있어서는 의미가 크지 않고 껍질을 씌울 필요가 없다. 그러나 끼워 넣는 원소에 있어서는 매우 필요하다. 부원소를 BFC로 설정하면 된다.이렇게 원소의margin은 부원소의margin과 중첩되지 않을 것이다.
출처:http://www.w3cmm.com/other/css-bfcblock-formatting-context.html
 
부동을 지우는 방법:http://chenfengming.cn/other/css-clearing-float.html
 http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html