塊格式上下文

css2.1中定義

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

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

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

MDN中的描述

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。

下列方式會創建塊格式化上下文：

• 根元素或包含根元素的元素
• 浮動元素（元素的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，即使該元素沒有包裹在一個多列容器中

創建了塊格式化上下文的元素中的所有內容都會被包含到該BFC中。

塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊也只會發生在屬於同一BFC的塊級元素之間。

總結

BFC就是包住他的所有子元素