BFC（块级格式化上下文）是一个独立的渲染区域，内部元素的布局不受外部影响，也不会影响外部。触发方式常见的有：根元素、overflow 非 visible（如 hidden/auto）、float 非 none、display: inline-block / flow-root / flex / grid 容器、position: absolute/fixed 等。
它解决三类经典问题：
- 清除浮动（高度塌陷）：父元素形成 BFC 后会计算浮动子元素的高度，例如给父级
overflow: hidden； - 阻止 margin 折叠：处于同一 BFC 的相邻块级元素垂直 margin 会合并，把它们放进不同 BFC（如外包一层
overflow: hidden）即可隔离； - 避免文字环绕浮动元素：给右侧内容触发 BFC，它会整体避开浮动盒子，实现两栏自适应布局。
易错点：overflow: hidden 触发 BFC 但可能裁剪内容，display: flow-root 是语义最干净的方式。追问方向：BFC 与 IFC 的区别、为什么 BFC 内部 float 仍会影响布局但外部不受影响。