什麼是 Block Formatting Context (BFC)

參考：https://www.w3.org/TR/CSS21/v...
在講BFC以前，先來了解一下CSS2.1規範裏面的一個關於元素的定位規則(positioning schemes),主要有三種：常規文檔流，浮動，絕對定位。
1: 常規文檔流(Normal flow)：常規文檔流包含三種狀況：

1: 塊級盒元素（block-level boxes）的塊級格式(block formatting)
2: 行內盒元素(inline-level boxes)的行內格式(inline formatting)
3: 塊級盒元素和行內盒元素的相對定位

2: 浮動（Floats）：

1: 第一步：先按照常規文檔流的規則定位
2: 第二步：從文檔流裏面抽離出來，最大化地靠左或者靠右
3: 浮動的元素對後續的元素定位有影響

3: 絕對定位(Absolute positioning):

1: 絕對定位包括 'position: absolute'和'position: fixed'
2: 絕對定位的元素從文檔流裏面完全地抽離出來，對後續的元素定位沒有影響
3: 絕對定位的元素最終的位置取決的‘top’,'right', 'bottom', 'left'設置的值。而這些值都是相對其父元素來講的。

在上面的第一點裏面咱們已經提到了一個概念叫：block formatting。那什麼又是Block Formatting Context呢？這裏先看看MDN是給出的定義：

A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.

額，看完以後，我腦殼裏面只有一個想法： What is that?
不如先不去追究這個概念，先來看看在哪些狀況下，會創造BFC：

1：根元素
2: 浮動元素：float的值不是‘none’的元素
3: 絕對定位元素:（position: absolute 或者 position: fixed）
4: 行內塊級元素:(display: inline-block)
5: 表格單元格（table cells）:（display: table-cell,也是 HTML table cells的默認值）
6: 表單標題（table captions）: (display: table-caption, 也是HTML table captions的默認值)
7: 塊元素（block element）當overflow爲非'visible'的其餘值：auto, hidden, initial, overlay, scroll. 當overflow:inherit, 這時候取決於最終繼承到的值。
8: display: flow-root的元素
9: column-span: all的元素

看完了上面產生BFC的各類狀況，如今再來看看BFC到底有些什麼規則：
1: 在一個塊元素格式上下文（BFC）,這些盒子（boxs）從父元素（容器元素）的頂端垂直地一個接一個排列
2: 兩個相鄰元素的垂直間距（margin）會摺疊（collapse）
3: 每個元素的左邊界緊貼着容器元素的左邊界（固然這是針對從左到右排列的元素，從右到左排列的元素那就是又邊界緊貼着容器元素的右邊界）。