Block Formatting Context (BFC)

HTML/CSS

BFC란 용어는 들어보지 못했어도 아마 html/css로 레이아웃 작성을 해봤다면 이미 BFC의 원리는 알고 있을 가능성이 크다.

Normal Flow

일단 html에 작성된 요소들의 위치를 정하는 방법은 여러 가지 있는데, 일반적인 상황에서 각각의 요소들이 배치되는 순서를 normal-flow(일반적 흐름) 라고 한다.

 

 

 

이런식으로 블록 요소들은 기본적으로 위에서 아래로 배치되고 인라인 요소들은 왼쪽부터 시작해 오른쪽으로 배치된다.

 

BFC & IFC

normal flow에는 두 가지 배치 방식이 있는데 그중 한 가지가 Block Formatting Context(BFC) , 그리고 Inline Formatting Context(IFC) 다. 

전자는 영역에 포함된 요소들을 세로로 배치할 수 있도록 도와주는 역활을 하고 후자는 가로로 배치할수 있게 해 준다.

 

BFC는 레이아웃 안의 미니 레이아웃이라고 생각하면 될 거 같다.

 

BFC가 생성되면 내부의 모든 요소들은 이 Block Context안에 속하게 된다.

 

이런 특성 때문에 float 된 요소들의 레이아웃을 잡을 때 사용된다.

 

BFC와 float

보통 아래와 같이 텍스트 옆에 요소가 float 된 레이아웃을 만든다면 이런 결과가 나올 거다.

 

 

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

이렇게 보면 아무 문제없어 보이지만 만약 텍스트가 지금보다 적다면 어떨까?

 

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

부모 요소인 outer가 float 된 요소를 담지 못하는 걸 볼 수 있다.

이를 해결해주기 위해 부모 요소에게overflow:hidden(또는 auto)를 주며 부모 요소(outer)를 BFC로 명시해주는 거다.

 

MDN에 따르면 다음에 경우 BFC가 생성된다고 한다.

• html root 태그 (body 태그는 만들어지지 않는다)
• none을 제외한 float
• position: fixed, absolute
• display: inline-block, table, table-cell, table-caption
• overflow: visible을 제외한 모든 값
• display: flow-root (일부 브라우저만 작동)
• display: flex, inline-flex, grid, inline-grid

BFC가 생성되면 다음과 같이 동작하는 걸 볼 수 있다.

 

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

짧은 텍스트임에도 불구하고 float 된 요소의 높이가 부모 요소에게 인식이 되며 담긴 걸 볼 수 있다.

 

BFC에 또 다른 특성으로는 마진 병합(margin collapsion)을 방지할 수 있다는 것이다.

마진 병합은 요소들의 마진 값이 겹칠 경우 더 큰 마진만 적용되는 현상을 일컫는다.

 

예를 들어 아래에 예제를 보면 ,

See the Pen Untitled by Min Gee (@minki607) on CodePen.

 

. p에 마진을 20px 줬음에도 텍스트 영역으로 표시된 위아래에 마진 병합 현상이 일어나 마진이 들어가지 않은걸 볼 수 있다.

여기서 outer영역을 bfc로 생성하면 마진 병합이 일어나지 않고 동일한 마진이 상하좌우로 주어진 것을 볼수 있다.

 

 

See the Pen Untitled by Min Gee (@minki607) on CodePen.