BFC 是什么？为什么能解决浮动塌陷和部分外边距重叠问题？

知识点详解：把布局隔离的边界画出来

浮动还在页面上，父容器为什么没有包住它？

假设一个资料卡容器里只有一张 float: left 的头像。头像有高度，但是浮动不按普通正常流子元素的方式撑起父容器的自动高度。于是背景和边框可能看起来塌下去了。

给容器设置 display: flow-root 后，它建立新的 BFC。这个区域在计算自动高度时会考虑内部浮动，容器就能包住头像。浮动没有被取消，头像仍然是浮动元素。 改变的是父容器计算内部布局的边界。

.profile {
  display: flow-root;
}
.avatar {
  float: left;
  width: 80px;
  height: 80px;
}

这里是 CSS 原生布局规则，不存在等价的 TS 或 Python 实现。

先区分父子合并，再讨论相邻合并

普通块容器没有边框、内边距等阻隔时，第一个正常流子元素的上外边距可能与父元素合并。你给子元素加了 margin-top，结果像是整个父元素都被推下去了，这就是一种常见表现。

在父容器上建立 BFC，子元素的 margin 就留在这道边界里面，不再与父容器的 margin 合并。

但是，假设两个相邻段落都位于同一个普通块父容器中，上一个 margin-bottom 为 20px，下一个 margin-top 为 30px。满足合并条件时，间距是 30px，不是 50px。只给这两个段落各自建立 BFC，并不自动隔离它们在共同父级中的外边距。

要改变这种关系，可以按设计把其中一个段落放进新的 BFC 包装容器，让内外的 margin 不穿过包装边界；如果本来就是列表间距，改用 Flex 或 Grid 的 gap 往往更直接。

overflow 的副作用不能略过

overflow: hidden 或 auto 在符合条件时会建立 BFC，所以早年的清浮动代码经常这么写。但 hidden 还会裁剪溢出内容，auto 可能带来滚动条。你只是想包住头像，却顺手剪掉了弹出的提示框，这就不是一个划算的修复。

flow-root 的意思比较清楚：我要一个新的普通流布局区域，不是要裁剪它。

另外，BFC 也不是“CSS 完全互不影响”的结界。继承、百分比尺寸、包含块等关系仍然存在。Flex 和 Grid 则建立各自的布局上下文，不能把它们的所有行为都套成 BFC 的规则。

面试里怎么证明自己没有只背术语？

可以拿三个小页面分别验证：容器内只有浮动、父子上外边距合并、两个兄弟元素的外边距合并。每次只改变建立上下文的那个容器，观察边框位置、容器高度和元素间距。

这样你能说明“哪条关系改变了”，而不是只说一句“BFC 可以解决高度塌陷”。工程上也一样，先找需要隔离的关系，再决定是 flow-root、gap，还是修正本来就不该存在的浮动布局。

本题机制参考：MDN：Block formatting context。

面试官继续追问

overflow: clip 也能建立 BFC 吗？

单独设置 clip 不会像 hidden 那样建立新的格式化上下文。如果还需要 BFC，可配合 display: flow-root。不要把所有非 visible 的值视为同一种行为。

BFC 内的兄弟元素不会合并 margin 吗？

仍可能合并。BFC 阻止的是符合该边界规则的内外合并，不会取消区域内部正常块布局的合并规则。

现在还值得学 BFC 吗？

值得。现代项目更常用 Flex 和 Grid，但读旧代码、解释浮动与普通块布局、选择无副作用的修复，都需要理解这些基础。

面试速记卡

• BFC：普通块布局的独立格式化区域。
• 包住浮动：自动高度计算会考虑内部浮动，不是取消 float。
• margin：隔离内外边界，不是禁止所有合并。
• 工具选择：只为建立 BFC 时，优先考虑 flow-root。
• 工程检查：overflow 可能同时裁剪内容或制造滚动条。