내가 몰랐던 HTML/CSS part 3. BFC

BFC stands for Block Formatting Context
블럭 포맷팅 컨텍스트는 float를 하면서 생기는 공간(블럭)을 의미하고 있다. float만 BFC를 만드는 것이 아니고 Floats 외에 아래와 같은 수많은 경우에 BFC를 형성한다.

• Absolutely positioned elements (elements where position is absolute or fixed).
• Inline-blocks (elements with display: inline-block).
• Table cells (elements with display: table-cell, which is the default for HTML table cells).
• Table captions (elements with display: table-caption, which is the default for HTML table captions).
• Block elements where overflow has a value other than visible and clip.
• Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
• Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
• Multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1).
• column-span: all should always create a new formatting context, all element isn't contained by a multicol container

float한 이미지와 문장을 담고 있는 컨테이너 박스가 있다고 가정해보자. 
문장이 이미지 전부를 감쌀 만큼 긴 경우엔 문제가 없지만 텍스트의 길이 짧은 경우,
컨테이너 박스는 안에 담겨있는 context를 (contain❌)감싸지 못하고 
텍스트높이만큼 컨테이너의 크기가 지정이 되고 그앞으로 이미지만 불룩 튀어나와있는 꼴이 된다. 이럴 때 overflow: auto를 사용하면 새로운 bfc를 형성시키면서 텍스트를 담고 이미지도 새롭게 담는 공간이 생긴다. 그러니까 다시 말해, bfc를 페이지 위에 새롭게 만드는 미니 레이아웃이라고 생각하면 된다. 요소가 bfc를 만들었을 때 그안에 모든것들은 레이아웃 안에 contain된다. 

그럼 부모상자가 자식들을 감싸주어 부모상자안에 모두 담아주는 것 외에
bfc를 활용할 수 있는 방법은 무엇이 있을까?

1. The BFC prevents margins collapsing
   (마진이 겹치는 것을 막아 줄수있다)
2. A BFC stops content wrapping floats.
   (자동으로 텍스트가 플로트된 요소를 감아버리는 현상을 막을수 있다)
3. Using Block Formatting Contexts in Multi-column Layouts is suitable since you can make (certain amount of ) seperate 공간 for (certain amount of )columns.
   (위와 같이 독립된 공간을 만들수있다보니 나누어진 칼럼(열/칸)을 만드는 데 용이하다.