回答這個問題之前，我們先看一下官方的解釋。

CSS規范中對 BFC 的描述

9.4.1 塊格式化上下文

• 浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不為'visible'的塊盒會為它們的內容建立一個新的塊格式化上下文

• 在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并

• 在一個塊格式化上下文中，每個盒的left外邊（left outer edge）挨著包含塊的left邊（對于從右向左的格式化，right邊挨著）。即使存在浮動（盡管一個盒的行盒可能會因為浮動收縮），這也成立。除非該盒建立了一個新的塊格式化上下文（這種情況下，該盒自身可能會因為浮動變窄）

MDN 對 BFC 的描述

一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。

一個塊格式化上下文由以下之一創建：

• 根元素或其它包含它的元素
• 浮動元素 (元素的 float 不是 none)
• 絕對定位元素 (元素具有 position 為 absolute 或 fixed)
• 內聯塊 (元素具有 display: inline-block)
• 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
• 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
• 具有overflow 且值不是 visible 的塊元素，
• display: flow-root
• column-span: all 應當總是會創建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中。
• 一個塊格式化上下文包括創建它的元素內部所有內容，除了被包含于創建新的塊級格式化上下文的后代元素內的元素。

塊格式化上下文對于定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規則只適用于處于同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的布局，并且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

張鑫旭對 BFC 的描述

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。啪啦啪啦特性什么的，一言難盡，大家可以自行去查找，我這里不詳述，免得亂了主次，總之，記住這么一句話：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什么的也好理解了。

看了上面這么多的解釋，你會發現亂糟糟的 ，除了幾個元素會產生BFC以外，你對BFC還是說不清楚。 但是BFC有一個重要重要的原則：BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。根據這個特性舉兩個范例，你就會明白什么是BFC， 范例如下：（父子元素）

image.png

如果父元素沒有形成BFC的時候，就包裹不住子元素，子元素就會脫離文檔流 ，反之在父元素上添加形成BFC的條件之后

BFC形成

注意這里只是形成了BFC，利 用 BFC 包住浮動元素而已，和清除浮動有異曲同工之妙，但它不是清除浮動！！！！千萬別搞混淆。

范例二（BFC兄弟元素之間效果）

如果沒有形成BFC，紅色邊框的gege浮動起來之后，會覆蓋綠色邊框，

沒有形成

這個時候給綠色邊框加上形成BFC的屬性之后，由于綠色的邊框形成了BFC，就會展現特有的屬性，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素，涇渭分明

形成BFC

特別鳴謝：饑人谷芳芳老師