塊格式化上下文(BFC)的建立

滿足以下條件将建立塊格式化上下文：

根元素（）
浮動元素（float 值不為 none）
絕對定位元素（position 值為 absolute 或 fixed）
行内塊元素（display 值為 inline-block）
表格單元格（display 值為 table-cell，HTML 表格單元格預設值）
表格标題（display 值為 table-caption，HTML 表格标題預設值）
匿名表格單元格元素（display 值為 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是 HTML table、tr、tbody、thead、tfoot 的預設值）或 inline-table）
overflow 值不為 visible、clip 的塊元素
display 值為 flow-root 的元素
contain 值為 layout、content 或 paint 的元素
彈性元素（display 值為 flex 或 inline-flex 元素的直接子元素），如果它們本身既不是 flex、grid 也不是 table 容器
網格元素（display 值為 grid 或 inline-grid 元素的直接子元素），如果它們本身既不是 flex、grid 也不是 table 容器
多列容器column-span 值為 all 的元素始終會建立一個新的 BFC

塊格式化上下文(BFC)的布局規則

在塊格式化上下文中，從包含塊的頂部開始，一個接一個地垂直排列框。
兩個同級框之間的垂直距離由“margin”決定。塊格式上下文中相鄰塊級别框之間的垂直邊距折疊。
在塊格式化上下文中，每個框的左外邊緣與包含塊的左邊緣接觸（對于從右到左的格式化，右邊緣接觸）。即使在存在浮點數的情況下也是如此（盡管框的行框可能會由于浮點數而收縮），除非框建立了新的塊格式化上下文（在這種情況下，框本身可能會因為浮點數而變得更窄）。

清除浮動的影響

BFC元素可以用來清除浮動的影響，因為如果不清除，子元素浮動則父元素高度塌陷，必然會影響後面元素布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。
清除邊距重疊

BFC元素是不可能發生margin重疊的，因為margin重疊是會影響外面的元素的