## 定義 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。 在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。 在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。 ## 根元素或包含根元素的元素 浮動元素（元素的 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、row、tbody、thead、tfoot的默認屬性）或 inline-table） overflow 值不為 visible 的塊元素 display 值為 flow-root 的元素 contain 值為 layout、content或 strict 的元素 彈性元素（display為 flex 或 inline-flex元素的直接子元素） 網格元素（display為 grid 或 inline-grid 元素的直接子元素） 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1） column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。 創建了塊格式化上下文的元素中的所有內容都會被包含到該BFC中。 塊格式化上下文對浮動定位（參見 float）與清除浮動（參見 clear）都很重要。浮動定位和清除浮動時只會應用于同一個BFC內的元素。浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距折疊（Margin collapsing）也只會發生在屬于同一BFC的塊級元素之間。 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。 首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。 ***** ##### 參考鏈接 [深入理解BFC和Margin Collapse](https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html)