[css] Block Formatting Context (BFC)

웹 페이지의 시각적 CSS 렌더링의 일부를 형성하는 구역으로, 블록 박스의 레이아웃이 발생하는 범위를 정의합니다. BFC는 그 안의 블록 레벨 요소들이 어떻게 배치되며, 그 요소들 간의 관계와 상호작용을 어떻게 처리할지 결정합니다.

BFC 생성 조건
BFC는 다음과 같은 조건 중 하나 이상이 충족될 때 생성됩니다:
- `float` 속성이 `none`이 아닌 요소
- `position` 속성이 `absolute` 또는 `fixed`인 요소
- `display` 속성이 `inline-block`, `table-cell`, `table-caption`, `flex`, `grid` 등인 요소
- `overflow` 속성이 `visible`이 아닌 블록 박스
- `contain` 속성이 `layout`, `content`, 또는 `paint`인 요소
- 기타 몇 가지 더 복잡한 조건들

BFC의 주요 특징과 역할
BFC는 다음과 같은 중요한 특징과 역할을 가집니다:

1. 내부 마진 격리: BFC 내부의 블록 박스들은 외부의 요소들과 마진 병합(margin collapsing)이 발생하지 않습니다. 즉, BFC를 형성하는 요소 내부에서는 상하 마진이 격리되어 외부와 달리 계산됩니다.
   
2. 텍스트 감싸기 제어: `float`된 요소 옆에서 텍스트 줄이 어떻게 감싸질지를 BFC가 제어합니다.

3. 레이아웃의 독립성: BFC는 '섬'과 같이 독립적인 컨테이너로 작용하여 내부 레이아웃이 외부 요소들의 영향을 받지 않습니다. 이는 다른 BFC에 속한 요소들과의 레이아웃 충돌을 방지합니다.

4. 클리어링 플로트: BFC는 `float` 요소가 내부에 있을 때, 해당 요소들을 포함하여 클리어링을 할 수 있어, 하단 요소가 `float` 요소 아래로 떨어지는 것을 방지합니다.

예제
CSS와 HTML을 사용한 간단한 예제를 통해 BFC의 작용을 설명합니다:

이 경우, `div` 요소는 `overflow` 속성이 `hidden`으로 설정되어 BFC를 생성합니다. `div` 내부의 `p` 요소 마진은 `div`의 내부에 격리되어 외부와 병합하지 않습니다.

BFC는 복잡한 레이아웃을 설계할 때 매우 유용한 도구로, CSS의 깊은 이해를 필요로 합니다. 따라서 웹 개발을 진행할 때 BFC의 특성을 잘 이해하고 사용하면, 보다 정교하고 예측 가능한 레이아웃을 구성할 수 있습니다.

 

 

 

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

Block formatting context - CSS: Cascading Style Sheets | MDN