块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化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 table、row、tbody、thead、tfoot的默认属性)或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
的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位(参见 float
)与清除浮动(参见 clear
)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。
上文摘自MDN:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
下面详细说明
-
触发条件:
- 根元素(html)
positon: absolute/fixed
display: inline-block / table / table-cell...
float
元素ovevflow
!==visible
-
规则:
- 属于同一个 BFC 的两个相邻 Box 垂直排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠,注意不仅兄弟Box会发生重叠,父子Box也会(内部Box为BFC:absolute/fixed、 inline-block不符合)
- BFC 中子元素不会超出他的包含块(只有BFC:overflow、table/table-cell/inline-table符合)
- BFC 的区域不会与 float 的元素区域重叠(非BFC的区域中的文字也不会被浮动层覆盖,而是环绕于周围)
- 计算 BFC 的高度时,浮动子元素也参与计算,即BFC的高度会被浮动子元素撑开
-
应用:
- 阻止
margin
重叠 - 可以包含浮动元素
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
- 阻止