block format context, BFC 블록서식맥락

CSS가 렌더링되는 방식을 배우면서 normal flow 영역에 BFC, IFC가 있다는 것을 배웠다.

한국말로 블록서식맥락이라는 이 BFC를 float를 공부하면서 좀 더 자세히 알고 있어야되겠다는 생각이 들었다.

1. BFC(block format context), 블록서식맥락?

MDN에서는 아래와 같이 설명하고 있다.

A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.
> Block formatting context (BFC)는 웹 페이지의 시각적 CSS 렌더링의 일부입니다.
이는 block 상자의 레이아웃이 발생하고 float가 다른 요소들과 상호작용하는 영역입니다.

2. BFC는 어떨 때 생성되는 것일까?

아래는 MDN을 해석한 내용이다.

1. The root element of the document (<html>)	문서의 root 요소 (<html>)
2. Floats (elements where float isn't none).	float 속성일 때(float 속성이 none이 아닌 요소)
3. Absolutely positioned elements (elements where position is absolute or fixed).	position: absolute; 또는 position: fixed; 인 요소
4. Inline-blocks (elements with display: inline-block).	display: inline-block; 일 때
5. Table cells (elements with display: table-cell, which is the default for HTML table cells).	display: table-cell; 일 때 (table-cell은 table의 기본값)
6. Table captions (elements with display: table-caption, which is the default for HTML table captions).	display: table-caption; 일 때 (table 캡션의 기본값)
7. Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.	display: table, table-row, table-row-group, table-header-group, table-footer-group 속성을 가진 테이블 셀 (HTML의 테이블, 테이블행, 본문, 머리글, 푸터에 해당하는 기본값, inline-table로 설정된 요소도 이에 해당)
8. Block elements where overflow has a value other than visible and clip.	overflow:visible; or clip이 아닌 block 요소
9. display: flow-root.	display: flow-root
10. Elements with contain: layout, content, or paint.	contain: layout, content or paint
11. Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.	flex (display: flex; or inline-flex를 가진 자식 요소나 flex 자체)
12. Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.	grid (display:grid; or inline-grid)
13. Multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1).	column-count, column-width가 auto가 아닌 것(column-count: 1을 포함)
14. column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (Spec change, Chrome bug).	column-span: all; 인 경우