塊格式化上下文

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的部分，是塊級盒布局發生的區域，也是浮動元素與其他元素互動的區域。有這幾種框會為其內容創建新的塊格式化上下文：浮動框、絕對定位框、非塊框的塊容器（例如inline-blocks、table-cells和table-captions）、“overflow”屬性非“visible”的塊框（除非這個值已擴散到整個視口）。

在塊格式化上下文中，框會從包含塊的頂部開始，一個接一個地，垂直向下地擺放。兩個兄弟框之間的垂直距離由“margin”屬性來決定。在同一個塊格式化上下文中，相鄰的塊級框之間的垂直外邊距會出現摺疊。每個框的左外邊距邊要緊貼其包含塊的左邊。即使在有浮動的情景下也是如此，除非框創建了一個新的塊格式化上下文（在這種情況下該框可能會為了避開浮動框而變窄）。

創建 塊格式化上下文的方式如下：

•根元素或其它包含它的元素

•浮動元素 （元素的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 tables, table rows, table bodies, table headers and table footers的默認屬性]，或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的元素沒有被包裹在一個多列容器中，column-span: all也始終會創建一個新的格式化上下文。

塊格式化上下文包含創建它的元素內的所有內容。

塊格式化上下文對於定位 （參見float） 與清除浮動 （參見clear） 很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的布局，並且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。Margin collapsing也只發生在屬於同一塊格式化上下文的塊級元素之間。