BFC 的簡單理解

BFC 的擴寫是 Block formatting contexts （塊級格式化上下文），它看不見摸不着但對 CSS 盒模型有影響。
標準裏對 BFC 的描述是：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

同時提到一個前端常見的 collapse 現象：

Vertical margins between adjacent block-level boxes in a block formatting context collapse.

因此筆者是這麼理解 BFC 的：

1. 浮動元素、絕對定位元素、非塊盒的塊容器（inline-block、table-cell、table-caption 元素）、overflow 不爲 visible 的元素會建立 BFC
2. 同一個 BFC 裏，兩個相鄰的塊級盒的垂直外邊距會 collapse（塌陷）

也就是說不一樣的 BFC之間就會消除相鄰元素的 collapse，如下是可建立 BFC 的條件：

• div: float:left | right
• div: display:inline-block | table-cells | table-captions
• div: position:absolute
• div: overflow:hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls | fragments

這裏寫了個測試 collapse 的 demo，經測試發現：

• 「同一個 BFC 裏，兩個相鄰的塊級盒」能夠指相鄰元素如 div-2 和 div-3，也能夠指父元素和子元素如 div-1 和 div-2 或 3
• 設置 overflow 時，只能讓 div-1 與它的子元素 div-2 或 3 消除 collapse，而不能讓 div-1 與相鄰元素 div-4 消除 collapse

參考：BFC 的文檔
原文：BFC 的簡單理解