塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的部分，是塊級盒布局發生的區域，也是浮動元素與其他元素互動的區域。有這幾種框會為其內容創建新的塊格式化上下文：浮動框、絕對定位框、非塊框的塊容器（例如inline-blocks、table-cells和table-captions）、“overflow”屬性非“visible”的塊框（除非這個值已擴散到整個視口）。
在塊格式化上下文中，框會從包含塊的頂部開始，一個接一個地，垂直向下地擺放。兩個兄弟框之間的垂直距離由“margin”屬性來決定。在同一個塊格式化上下文中，相鄰的塊級框之間的垂直外邊距會出現摺疊。每個框的左外邊距邊要緊貼其包含塊的左邊。即使在有浮動的情景下也是如此，除非框創建了一個新的塊格式化上下文（在這種情況下該框可能會為了避開浮動框而變窄）。
基本介紹
- 中文名：塊格式化上下文
- 外文名：Block Formatting Context
- 縮寫：BFC
- 所屬語言：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 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也始終會創建一個新的格式化上下文。
塊格式化上下文包含創建它的元素內的所有內容。
