BFC（塊級格式化上下文）的作用及生產方法

由於如浮動、margin值疊加等時候會用到bfc，但讓我詳細說bfc到底是什麼，有說不清楚，所以決定對bfc的知識進行乙個整理。

bfc中三個英文本母b、f、c分別是block（塊級盒子）、formatting（格式化）、context（上下文）。

bfc的中文意思是塊級格式化上下文。簡單的理解bfc，其從樣式上和普通盒子沒有什麼區別，其從功能上可以將其看作是隔離了的獨立容器，容器裡面的元素布局不會影響到外面的元素（如浮動、首元素的margin-top加到了父元素上等），並且bfc容器具有普通容器沒有的一些特點，如包含浮動元素解決內容塌陷等。

bfc是特殊盒子（容器）所具有的的特性（屬性），這種特殊盒子在樣式上和普通盒子沒有區別；其從功能上可以將其看作是隔離了的容器，容器裡面的布局不會影響到外面的元素，並且該容器有一些普通容器沒有的特殊能力（作用），如解決高度塌陷、解決margin值疊加等。

觸發bfc的條件：

1.浮動元素導致父元素內容塌陷

浮動使內容塌陷**：

浮動使內容塌陷結果截圖：

使用bfc解決**：

我是浮動元素

使用bfc解決結果截圖：

2.首節點設定margin-top使父元素向下移動

**：

我是新增margin-top

結果截圖：

解決margin-top使父元素下移問題**：

我是新增margin-top

解決問題截圖：

3.相鄰兄弟元素的margin-bottom與margin-top相覆蓋

margin值覆蓋問題**：

我是乙個綠盒子，距離下面50px，我的高是100px

我的邊框是藍色的，距離上邊50px

margin值覆蓋問題結果截圖：

解決margin值疊加問題**：

我是乙個綠盒子，距離下面50px，我的高是100px

我的邊框是藍色的，距離上邊50px

解決margin值疊加問題結果截圖：

bfc的這些特殊能力（作用），都是基於其「是乙個隔離了的容器，容器內部的布局不會影響到外面元素的布局」與普通容器在功能上的差別所決定的。