塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。
下列方式會創(chuàng)建塊格式化上下文：
- 根元素（
<html>） - 浮動元素（元素的
float不是none） - 絕對定位元素（元素的
position為absolute或fixed） - 行內(nèi)塊元素（元素的
display為inline-block） - 表格單元格（元素的
display為table-cell，HTML表格單元格默認(rèn)為該值） - 表格標(biāo)題（元素的
display為table-caption，HTML表格標(biāo)題默認(rèn)為該值） - 匿名表格單元格元素（元素的
display為table、``table-row、table-row-group、``table-header-group、``table-footer-group（分別是HTML table、row、tbody、thead、tfoot 的默認(rèn)屬性）或inline-table） -
overflow計算值(Computed)不為visible的塊元素 -
display值為[flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root)的元素 -
contain值為layout、content或 paint 的元素 - 彈性元素（
display為flex或inline-flex元素的直接子元素） - 網(wǎng)格元素（
display為grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不為auto，包括 ``column-count為1） -
column-span為all的元素始終會創(chuàng)建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標(biāo)準(zhǔn)變更，Chrome bug）。
塊格式化上下文包含創(chuàng)建它的元素內(nèi)部的所有內(nèi)容.
塊格式化上下文對浮動定位（參見 float）與清除浮動（參見 clear）都很重要。浮動定位和清除浮動時只會應(yīng)用于同一個BFC內(nèi)的元素。浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距折疊（Margin collapsing）也只會發(fā)生在屬于同一BFC的塊級元素之間。
作用
- 可以包含浮動的元素「清除浮動」
- 可以阻止元素被浮動元素覆蓋
- 解決外邊距塌陷
說到這就不得不提一下彈性盒模型
