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