Block Formatting Context，块级格式化上下文

BFC 是一个独立的渲染区域，它规定了内部块级盒子的布局方式，并且不会影响到外部的布局。简单来说，BFC 是一个隔离的独立容器，容器内部的布局不会影响到外部，反之亦然。

怎么触发

元素或属性	值
根元素 `<html>`	-
`float`	不为 `none`
`position`	`absolute`，`fixed`
`display`	`inline-block` `flow-root` `flex` `grid` `inline-flex` `inline-grid` `table` `inline-table` `table-cell` `table-caption` `table-row` `table-row-group` `table-header-group` `table-footer-group`
`overflow`	`auto`、`scroll`、`hidden`
`contain`	`layout` `content` `paint`
`column-count`、`column-width`	不为 `auto`

特性

区块格式化上下文 - CSS：层叠样式表 | MDN (mozilla.org)
面试官：请说说什么是BFC？大白话讲清楚 - 掘金 (juejin.cn)
CSS中的BFC是什么？怎么用？ - 掘金 (juejin.cn)