Skip to content
On this page

BFC, Block Formatting Context,块级格式化上下文,是页面上用于渲染 css 的一个区域,相当于一个小型的布局,块级元素和浮动元素会根据这块区域进行布局。

作用有三个:清除浮动、包裹浮动、避免边距塌陷。

创建 BFC 条件有很多种:

  • html 根元素
  • 设置了 float 属性的元素
  • 绝对定位的元素
  • 设置 display: inline-block | table-*(table-cell table-caption table-raw)
  • 设置 overflow,值为除 visible 和 clip 以外的,例如 scroll、hidden 等
  • 设置 contain: (layout | content | paint)
  • Flex 和 Grid 布局的子元素(非 flex 和 grid 布局容器本身)

常用的有两种:

  • 设置 overflow 属性,除了visible 和 clip以外的值都可以,例如 overflow: hidden
  • 设置 display: flow-root,最佳方案

Released under the MIT License.