CSS 之BFC(블록 서식 컨텍스트)

이전에는 BFC가 무엇인지 몰랐습니다. 오늘 읽어보니 예전에도 자주 접해왔지만 전문 명칭은 몰랐네요. 클로저나 상속과 마찬가지로 이전에도 자주 사용했었는데, 오늘은 CSS 포지셔닝의 BFC에 대해 이야기해보겠습니다.

BFC는 float 제거와 관련이 있으므로 float를 제거하는 방법은 크게 두 가지가 있습니다.

①clear 속성을 사용하여 float를 제거합니다

②상위 컨테이너를 BFC로 만들기

BCF에 대해 이야기하기 전에 요소의 레이아웃을 제어하는 ​​세 가지 주요 위치 지정 방식이 있다는 점을 말씀드리고 싶습니다: Normal Flow와 Floats 및 Absolute Positioning

***정상 흐름

정상 흐름에서는 요소가 HTML의 순차적 위치에 따라 위에서 아래로 배치됩니다. 이 과정에서 인라인 요소는 줄이 가득 찰 때까지 가로로 정렬된 다음, 줄이 바뀌고 블록 수준 요소는 완전히 새로운 줄로 렌더링됩니다. 별도로 지정하지 않는 한 모든 요소는 기본적으로 일반 흐름에 배치됩니다. 요소의 위치는 다음과 같습니다. HTML 문서에서의 위치에 따라 결정됩니다.

***플로트

플로트 레이아웃에서는 요소가 먼저 일반 흐름의 위치에 따라 나타난 다음 방향에 따라 왼쪽이나 오른쪽으로 최대한 오프셋됩니다. 플로트의.

***절대 위치 지정

절대 위치 레이아웃에서는 요소가 전체적으로 일반 흐름과 분리되므로 절대 위치가 지정된 요소는 형제 요소에 영향을 미치지 않습니다(플로팅하는 동안). 요소는 형제 요소에 영향을 미칩니다) 요소의 특정 위치는 절대 위치 좌표에 의해 결정됩니다.

BFC는 일반 스트림에 속하므로 형제 요소에 영향을 주지 않습니다.

&&--BFC의 정의--&&

박스 요소를 레이아웃할 때 BFC는 특정 규칙에 따른 레이아웃이 다른 환경에 영향을 미치지 않는 환경을 제공합니다. 예를 들어, 플로팅 요소는 BFC를 형성합니다. 플로팅 요소 내의 하위 요소는 주로 플로팅 요소의 영향을 받으며 두 플로팅 요소는 서로 영향을 미치지 않습니다. 즉, 요소가 BFC가 되기 위한 조건을 충족하면 요소의 내부 요소의 레이아웃과 위치 지정은 (내부 상자가 새로운 BFC를 생성하지 않는 한) 서로 영향을 미치지 않으며 격리된 독립 컨테이너가 됩니다. .

&&--BFC란 정확히 무엇입니까--&&

시각적 레이아웃의 경우 Block Formatting Context는 HTML 요소가 특정 규칙에 따라 레이아웃되는 환경을 제공합니다. 한 환경의 요소는 다른 환경의 레이아웃에 영향을 주지 않습니다. 예를 들어, 부동 요소는 BFC를 형성합니다. 부동 요소 내의 하위 요소는 주로 부동 요소의 영향을 받으며 두 부동 요소는 서로 영향을 미치지 않습니다. 이는 BFC가 독립적인 관리 단위라는 생각과 다소 유사합니다.

&&--BFC 구성 방법--&&

①float 값은 none이 아닙니다.

②overflow 값이 보이지 않습니다.

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

④위치의 값은 상대적이거나 고정적이지 않습니다.

⑤css3의 플렉스 박스

&&--BFC의 역할--&&

①플로팅 요소 포함(클리어 플로트)

BFC는 다음을 기반으로 합니다. 하위 요소 상황에 맞게 높이를 조정하는 기능입니다. 이 기능은 상위 요소에 Overflow:hidden/auto/scroll, float:left/right 스타일을 사용하여 플로팅 요소

②에 포함되지 않은

를 닫는 것입니다. 🎜> 플로팅 요소는 무시됩니다. 형제 요소의 존재는 형제 요소를 덮습니다. 형제 요소에 대한 BFC를 생성하면 이러한 상황이 발생하는 것을 방지할 수 있습니다.

&&--BFC에는 세 가지 주요 특징이 있습니다-&&

①BFC는 여백이 무너지는 것을 방지합니다

연결된 두 p의 수직 여백이 겹치게 됩니다. 실제 개발에서는 이런 접기가 필요하지 않을 수도 있습니다. 이 경우 BFC의 기능 중 하나를 사용할 수 있습니다. - 여백이 겹치는 것을 방지합니다. 상위 및 하위 요소의 여백 축소를 방지합니다. 두 블록 수준 요소가 인접하고 동일한 블록 수준 서식 컨텍스트에 있는 경우에만 두 요소 사이의 수직 여백이 겹칩니다. 즉, 두 개의 블록 수준 요소가 인접하더라도 동일한 블록 수준 서식 지정 컨텍스트에 있지 않으면 여백이 축소되지 않습니다. 동시에 BFC 요소에는 하위 요소와 함께 축소된 여백이 없습니다.

②BFC는 플로팅 요소를 포함할 수 있습니다

이것은 바로 위의 플로트를 닫는 Overflow: Hidden 및 Overflow: auto 메서드를 사용하는 원리입니다. 부동 요소의 상위 요소입니다. 그러면 부동 요소를 포함하고 부동을 닫을 수 있습니다.

W3C의 원본 텍스트는 "블록 서식 컨텍스트 루트에 대한 '자동' 높이"입니다. 즉, BFC는 하위 요소에 부동 요소가 포함되어 있어도 하위 요소의 상황에 따라 높이에 자동으로 적응합니다. .

그러나 IE6-7은 W3C의 BFC를 지원하지 않고 자체 hasLayout을 사용합니다. 성능 측면에서 hasLayout 자체에 많은 문제가 있어 IE6-7에서 일련의 버그가 발생한다는 점을 제외하면 BFC와 매우 유사합니다. hasLayout을 트리거하는 조건은 BFC를 트리거하는 것과 다소 유사합니다. Kayo는 특정 상황을 소개하는 기사를 작성할 것입니다. 여기서 Kayo는 hasLayout을 트리거하기 위해 IE 특정 CSS 속성인 Zoom: 1을 설정할 것을 권장합니다. Zoom은 요소의 확대/축소 비율을 설정하거나 검색하는 데 사용됩니다. 값이 "1"이면 요소의 실제 크기를 사용하는 것입니다. 없이 hasLayout을 실행할 수 있습니다. 요소에 다른 영향을 미치므로 상대적으로 더 편리합니다.

③BFC는 요소가 플로팅 요소에 의해 가려지는 것을 방지할 수 있습니다
위에서 언급한 것처럼 플로팅 요소의 블록 형제 요소는 플로팅 요소의 위치를 ​​무시하고 전체 행을 차지하려고 합니다. 부동 요소로 덮여 있으므로 이 형제 요소에 대해 BFC를 트리거하면 이러한 일이 발생하는 것을 방지할 수 있습니다.

더 많은 CSS BFC(Block Formatting Context) 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!