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,最佳方案