이 글에서는 CSS에서 중요한 BFC에 대한 자세한 설명을 주로 공유합니다. CSS에는 BFC라는 중요한 개념이 있습니다. BFC를 이해하면 CSS에서 원래 이상한(??) 부분을 이해하는 데 도움이 됩니다.
BFC를 설명하기 전에 문서 흐름에 대해 이야기하겠습니다. 우리가 자주 이야기하는 문서 흐름은 실제로 Positioned flow, Floating flow, Normal flow의 세 가지 유형으로 나누어집니다. 일반적인 흐름은 실제로 BFC의 FC를 나타냅니다. 문자 그대로 서식 지정 컨텍스트로 번역되는 FC(형식 지정 컨텍스트)는 페이지의 렌더링 영역으로, 하위 요소가 배치되는 방식은 물론 다른 요소와의 관계 및 역할을 결정하는 일련의 렌더링 규칙이 있습니다. 일반적인 FC에는 BFC, IFC, GFC 및 FFC가 포함됩니다.
BFC(블록 서식 지정 컨텍스트) 블록 수준 서식 지정 컨텍스트는 블록 수준 상자를 레이아웃하는 데 사용되는 렌더링 영역 또는 특정 조건에서 렌더링 규칙입니다.
MDN 설명: BFC는 웹 페이지의 시각적 CSS 렌더링 부분이며 블록 수준 상자 레이아웃이 발생하고 부동 요소가 다른 요소와 상호 작용하는 영역입니다.
루트 요소, 즉 HTML 태그
float 값은 없음이 아닌 left
, right
left
、right
overflow值不为 visible,为 auto
、scroll
、hidden
display值为 inline-block
、table-cell
、table-caption
、flex
、inline-flex
、grid
、inline-grid
position值为 absolute
、fixed
auto
, scroll
, hidden
입니다.표시 값은
입니다. 인라인 블록
, 테이블 셀
, 테이블 캡션
, flex
, inline-flex
, grid
, inline-grid
위치 값은 absolute
, fixed
BFC 계산 부동 자식 요소의 높이도 계산에 참여하는 경우
4. Function
일반 문서 흐름의 블록 요소가 부동 요소에 의해 가려져 일반 문서 흐름을 차지할 수 있으므로 요소의 부동, 표시, 위치 값을 설정할 수 있습니다. 부동 상자 오버레이로 덮이지 않도록 BFC를 트리거합니다.
플로팅 하위 요소가 포함된 상위 상자의 속성 값을 변경하여 하위 요소의 플로팅 상자를 포함하도록 BFC를 트리거합니다. 데모 보기
4.3 인접한 요소의 여백 병합 방지
position과 float를 설정하면 요소가 문서 흐름에서 벗어나 새로운 BFC가 생성되므로 두 요소가 인접한 요소가 아니므로 인접한 요소의 여백이 병합되는 것을 방지할 수 있지만 인라인 블록, inline-flex, inline 왜 -grid와 table-captain이 괜찮은가요? 이유 아시는 분 계시면 알려주세요~
관련 추천:
위 내용은 CSS에서 중요한 BFC에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!