BFC块级格式化上下文

约 493 字大约 2 分钟

2022-04-13

提问

什么是 BFC

BFC, Block Formatting Context。是 W3C CSS2.1规范中的一个概念。是页面中的一块块级渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和作用。

具有BFC特性的元素，可以看做是一个被隔离了的独立容器，容器内的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

根元素（html）
浮动元素，即 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、paint的元素
弹性元素，display为 flex、inline-flex元素的直接子元素
网格元素， display为gird、inline-gird元素的直接子元素
多列容器，元素的column-count或column-width不为 auto，包括column-count不为1
colum-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。