css 레이아웃에서 BFC란?

BFC의 정의는 W3C CSS 2.1 사양의 한 개념으로, 요소의 컨텐트 위치 지정 방법과 다른 요소와의 관계 및 상호 작용을 결정합니다.Block Formatting Context가 만들어진 요소 중 하위 요소는 하나씩 배치됩니다.수직 방향에서 그들의 출발점은 블록의 꼭대기를 포함하고 두 인접한 원소 간의 수직 거리는'margin'특성에 달려 있다.블록 레벨 요소와 인접한 블록 레벨 요소의 수직 여백은 Block Formatting Context에서 축소됩니다(collapse).
Block Formatting Context에서는 각 요소의 왼쪽 바깥쪽이 블록이 포함된 왼쪽(오른쪽에서 왼쪽으로 포맷되고 오른쪽 바깥쪽이 오른쪽으로 닿는 경우)에 부동이 있더라도 (요소의 내용 영역이 부동으로 인해 압축되지만 이 요소가 새 Block Formatting Context를 만들지 않는 한) 부동이 있습니다.
example:

~~~ .dimg과div.mainCon의 왼쪽 바깥쪽 테두리는div.con의 왼쪽 테두리와 접촉하는데div.mainCon의 내용이 비교적 많을 때 주위를 둘러싼 부동으로 나타난다.div.mainCon 요소를 트리거하는 BFC는 부동 요소를 둘러싸지 않고 2열 레이아웃을 구현하는 himg 요소
요소의 BFC를 트리거하는 방법:
1. 부동을 설정하면 div.mainCon의 폭이 내용에 따라 달라집니다. div.con의 나머지 폭이 div.mainCon의 내용을 수용하지 못할 때 줄이 바뀝니다. 2열 레이아웃을 확보하려면div.mainCon의 폭을 지정해야 합니다.
2. 오버플로우:hidden 설정하기;2열 레이아웃, div.mainCon은 용기의 남은 너비에 적응하지만, 넘침 숨기기를 설정하여 div.mainCon 밖에서 다른 요소를 레이아웃할 수 없습니다. (예를 들어 화살표 부동 메뉴...)
주의 (overflow:hidden 설정 또는 overflow:auto; 요소는 넘쳐나는test in chrome 숨기기)
3. display: inline-block 또는 display:table-caption 효과는float,div.mainCon 너비와 내용에 따라 내용이 많고 줄이 바뀔 수 있습니다. 너비를 설정해야 2열 레이아웃을 확보할 수 있습니다.
4.display:table-cell 효과는float와 같고 너비는 내용에 따라 얼마나 많은 내용이 있는지 줄을 바꿀 수 없습니다. 너비를 설정하지 않아도 2열 레이아웃을 확보하고ie6-7이display:table-cell을 지원하지 않는지 확인하세요.
5.position:absolute; 디스플레이:table-cell과 호환성
BFC란 무엇인가?
시각화된 레이아웃과 관련될 때 Block Formatting Context는 HTML 요소가 이 환경에서 일정한 규칙에 따라 레이아웃되는 환경을 제공합니다.한 환경의 요소는 다른 환경의 레이아웃에 영향을 주지 않습니다.예를 들어 부동 원소는 BFC를 형성하는데 부동 원소 내부의 하위 원소는 주로 이 부동 원소의 영향을 받고 두 부동 원소 사이에는 서로 영향을 주지 않는다.여기에는 BFC가 하나의 독립된 행정 단위라는 뜻과 약간 비슷하다.
BFC 구성 방법
4

float의 값은 none이 아닙니다

4

overflow의 값은 visible이 아닙니다

4

display의 값은 table-cell, table-caption, inline-block 중 하나입니다

4

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과 중첩되지 않을 것이다.


div.pre와 div.next의 수직 간격은 100px이다.div.next와 그 내부의 h2는 같은 BFC에 속하기 때문에 수직margin이 중첩되었다(h2의 수직margin천은 부원소와 다른 원소의 관계에 영향을 미친다).
해결 방법:
1.margin-top 2개가 서로 인접하지 않도록(div.next의margin-top:10px와h2의margin-top:100px), 부원소의border나padding을 설정합니다
2. 부모 요소의 BFC를 터치하여 독립된 레이아웃 단원을 형성한다.