[CSS] 블록 서식 문맥이란 ? ( Block Formatting Context, BFC )

 

블록 서식 문맥(BFC)은 웹 페이지의 CSS 시각적 서식 모델의 일부입니다.

BFC는 블록 박스의 레이아웃이 발생하는 환경을 정의하며, floating 요소와의 상호작용을 결정합니다.

 

BFC의 주요 특징

1. 컨테이너 역할
   BFC는 내부 요소를 포함하는 컨테이너로 작동합니다.
   내부의 모든 것이 외부 요소와 분리되어 독립적으로 작동합니다.
   
   
2. 마진 병합 방지
   BFC 내부의 요소들은 외부 요소와 마진 병합이 일어나지 않습니다.
   
   
3. 플로팅 요소 포함
   BFC는 내부의 플로팅 요소를 완전히 포함합니다.
   이로 인해 플로팅으로 인한 레이아웃 문제를 해결할 수 있습니다.
   
   
4. 플로팅 요소 주변 텍스트 래핑 방지
   BFC 내부의 텍스트는 외부의 플로팅 요소 주위로 흐르지 않습니다

BFC를 생성하는 방법

1. float 속성 값을 left 또는 right로 설정
2. position 속성 값을 absolute 또는 fixed로 설정
3. display 속성 값을 inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid로 설정
4. overflow 속성 값을 visible이 아닌 값으로 설정 (예: hidden, auto, scroll)

 

BFC의 실제 사용 예

1. 마진 병합 방지
2. 플로팅 요소 포함 (clearfix 대안)
3. 다단 레이아웃 구현
4. 플로팅 요소 옆 텍스트 배치 제어

 

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context

Block formatting context - CSS: Cascading Style Sheets | MDN