跳转到:

 

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的部分,是块级盒布局发生的区域,也是浮动元素与其他元素交互的区域。

创建块格式化上下文的方式如下:

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素的 position 为 absolute 或 fixed)
  • 内联块元素 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 匿名表格元素 (元素具有 display: tabletable-rowtable-row-grouptable-header-grouptable-footer-group [分别是HTML tables, table rows, table bodies, table headers and table footers的默认属性],或 inline-table )
  • overflow 值不为 visible 的块元素,
  • display 值为 flow-root 的元素
  • contain 值为 layoutcontent, 或 strict 的元素
  • 弹性元素 (display: flex 或 inline-flex元素的子元素)
  • 网格元素 (display: grid 或 inline-grid 元素的子元素)
  • 多列容器 (元素的 column-count 或 column-width 不为 auto 即视为多列,column-count: 1的元素也属于多列)
  • 即便具有 column-span: all 的元素没有被包裹在一个多列容器中,column-span: all 也始终会创建一个新的格式化上下文。

块格式化上下文包含创建它的元素内的所有内容。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。Margin collapsing也只发生在属于同一块格式化上下文的块级元素之间。

规范

另见