面试题：什么是 BFC？如何触发？能解决什么问题？

Block Formatting Context（块级格式化上下文）

内部块级布局独立于外部：浮动、清除浮动、margin 折叠等行为在 BFC 内外规则不同。

常见触发方式

• overflow 非 visible（如 hidden、auto）。
• display: flow-root（语义最干净，专用于建 BFC）。
• float 非 none、position: absolute/fixed（新建包含块，与 BFC 相关题常一起考）。
• display: inline-block、flex 子项、grid 子项等（依规范细节）。

常考用途

1. 包含浮动：父元素包住 float 子元素，避免高度塌陷。
2. 阻止与外部 margin 折叠（与外部兄弟分隔）。
3. 两栏自适应：一侧 float + 另一侧 BFC 不与 float 重叠（经典布局题）。