格式化上下文
- 根元素(
<html>) - 浮动元素(
float不为none) - 绝对定位元素(
position值为absolute或fixed) - 行内元素(
display为inline-block) - 表格单元格(
display为table-cell) - 表格标题(
display为table-caption) - 匿名表格单元格元素，通过元素
display为table,table-row,table-row-group,table-header-group,table-footer-group,inline-table隐式创建。 -
overflow不为visible -
display为flow-root -
contain为layout,content,paint - 弹性元素(
display为flex或inline-flex元素的直接子级)，如果它们自身既不是flex、grid或table容器 - 网格元素(
display为grid或inline-grid元素的直接子级)，如果它们自身既不是flex、grid或table容器 - 多列容器(
column-count或者column-width不为auto) -
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
