CSS에서 중요한 BFC에 대한 자세한 설명

이 글에서는 CSS에서 중요한 BFC에 대한 자세한 설명을 주로 공유합니다. CSS에는 BFC라는 중요한 개념이 있습니다. BFC를 이해하면 CSS에서 원래 이상한(??) 부분을 이해하는 데 도움이 됩니다.

1. 소개

BFC를 설명하기 전에 문서 흐름에 대해 이야기하겠습니다. 우리가 자주 이야기하는 문서 흐름은 실제로 Positioned flow, Floating flow, Normal flow의 세 가지 유형으로 나누어집니다. 일반적인 흐름은 실제로 BFC의 FC를 나타냅니다. 문자 그대로 서식 지정 컨텍스트로 번역되는 FC(형식 지정 컨텍스트)는 페이지의 렌더링 영역으로, 하위 요소가 배치되는 방식은 물론 다른 요소와의 관계 및 역할을 결정하는 일련의 렌더링 규칙이 있습니다. 일반적인 FC에는 BFC, IFC, GFC 및 FFC가 포함됩니다.

BFC(블록 서식 지정 컨텍스트) 블록 수준 서식 지정 컨텍스트는 블록 수준 상자를 레이아웃하는 데 사용되는 렌더링 영역 또는 특정 조건에서 렌더링 규칙입니다.

MDN 설명: BFC는 웹 페이지의 시각적 CSS 렌더링 부분이며 블록 수준 상자 레이아웃이 발생하고 부동 요소가 다른 요소와 상호 작용하는 영역입니다.

2. BFC 트리거 방식

1. 루트 요소, 즉 HTML 태그

2. float 값은 없음이 아닌 left, rightleft、right

3. overflow值不为 visible，为 auto、scroll、hidden

4. display值为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid

5. position值为 absolute、fixed

오버플로 값은 표시되지 않지만 auto, scroll, hidden입니다.

표시 값은 입니다. 인라인 블록 , 테이블 셀, 테이블 캡션, flex, inline-flex, grid, inline-grid

위치 값은 absolute, fixed

참고:
2. display:table도 생성할 수 있습니다. BFC를 사용하는 이유는 Table이 기본적으로 익명 테이블 셀을 생성하고 BFC를 생성하는 것이 바로 이 익명 테이블 셀이기 때문입니다.
   3. 제약 규칙

BFC 영역에 대한 브라우저 제약 규칙:

1. 생성된 BFC 요소의 하위 요소는 차례로 배치됩니다. 수직 방향의 시작점은 포함 블록의 상단이며 인접한 두 하위 요소 사이의 수직 거리는 요소의 여백 속성에 따라 달라집니다. BFC에서는 인접한 블록 수준 요소의 여백이 축소됩니다(마스터링 마진 축소).

2. 생성된 BFC 요소의 하위 요소에서 각 하위 요소의 왼쪽 여백은 포함 블록의 왼쪽 테두리에 닿습니다(오른쪽에서 왼쪽으로 형식 지정의 경우 오른쪽 여백이 오른쪽 테두리에 닿음). (비록 하위 요소의 콘텐츠 영역은 플로팅으로 인해 압축되지만), 하위 요소가 새 BFC도 생성하지 않는 한(예: 그 자체가 플로팅 요소임)

3. 규칙 해석:

4. 내부 상자는 수직 방향으로 하나씩 배치됩니다.

5. 내부 상자 사이의 수직 거리는 여백에 의해 결정됩니다. (완전한 설명은 다음과 같습니다. 동일한 BFC에 속하는 인접한 두 상자의 여백은 접히지만 서로 다른 BFC는 접히지 않습니다.)

각 요소의 왼쪽 여백은 포함 블록의 왼쪽 테두리에 닿습니다( 왼쪽 오른쪽으로), 부동 요소의 경우에도 마찬가지입니다. (이는 BFC의 하위 요소가 포함 블록을 초과하지 않는 반면 절대 위치를 가진 요소는 포함 블록의 경계를 초과할 수 있음을 보여줍니다.)

BFC의 영역은 다음의 요소 영역과 겹치지 않습니다. ​​float

BFC 계산 부동 자식 요소의 높이도 계산에 참여하는 경우

4. Function

BFC는 페이지에 있는 격리된 독립 컨테이너입니다. 외부 요소, 그 반대. 우리는 BFC의 이 기능을 사용하여 많은 일을 할 수 있습니다.

4.1 요소가 부동 요소에 의해 가려지는 것을 방지

일반 문서 흐름의 블록 요소가 부동 요소에 의해 가려져 일반 문서 흐름을 차지할 수 있으므로 요소의 부동, 표시, 위치 값을 설정할 수 있습니다. 부동 상자 오버레이로 덮이지 않도록 BFC를 트리거합니다.

데모 보기

4.2 플로팅 요소를 포함할 수 있습니다

플로팅 하위 요소가 포함된 상위 상자의 속성 값을 변경하여 하위 요소의 플로팅 상자를 포함하도록 BFC를 트리거합니다. 데모 보기

4.3 인접한 요소의 여백 병합 방지

🎜동일 BFC에 속하는 두 개의 인접한 블록 수준 하위 요소의 위쪽 및 아래쪽 여백이 겹칩니다(write-mode:tb-rl이 설정된 경우 가로 여백이 겹쳐서 발생합니다). 따라서 두 개의 인접한 블록 수준 하위 요소가 서로 다른 BFC에 속할 경우 마진 겹침을 방지할 수 있습니다. 🎜여기서 인접한 블록 수준 상자의 외부 주위에 p를 감싸고 이 p의 속성을 변경하여 두 개의 원래 상자가 두 개의 다른 BFC에 속하도록 변경하여 여백이 겹치는 것을 방지합니다. 🎜🎜데모 보기🎜🎜🎜하지만 질문이 있습니다. 🎜🎜p 레이어로 래핑된 경우 BFC를 트리거할 수 있는 속성을 설정하면 인접한 요소의 여백이 병합되는 것을 방지할 수 있습니다. 서로 다른 BFC에 속해 있으므로 마진 병합이 발생하지 않습니다. 🎜외부에 p를 포함하지 않는 경우 디스플레이를 inline-block, inline-flex, table-captain으로 설정하고 위치를 절대, 고정, 왼쪽이나 오른쪽으로 부동으로 설정하면 여백 병합을 방지할 수 있습니다. 질문이 있습니다: 🎜

position과 float를 설정하면 요소가 문서 흐름에서 벗어나 새로운 BFC가 생성되므로 두 요소가 인접한 요소가 아니므로 인접한 요소의 여백이 병합되는 것을 방지할 수 있지만 인라인 블록, inline-flex, inline 왜 -grid와 table-captain이 괜찮은가요? 이유 아시는 분 계시면 알려주세요~

관련 추천:

CSS에 숨겨진 BFC

BFC란? bfc

플로팅 정의와 플로팅 클리어링(BFC)

에 대한 간단한 이해

위 내용은 CSS에서 중요한 BFC에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!