overflow: hidden 触发父元素BFC以隔离父子margin合并；写在子元素无效，因BFC须由共同祖先创建；display: flow-root是更优替代，无裁剪副作用；BFC下margin-bottom被收容，应改用padding-bottom留白。
overflow: hidden 触发 BFC 隔离父子 margin
因为 overflow: hidden（以及 auto、scroll）会强制父元素创建一个新的块格式化上下文（BFC），而 BFC 的边界天然成为 margin 传播的“隔离墙”——子元素的 margin-top 无法再与父元素的内容区顶部直接接触，也就无法参与合并。
为什么只写在子元素上没用？
BFC 必须由**参与塌陷的共同祖先**来建立。父子 margin 合并发生在父容器的内容边界和第一个子元素之间，所以触发点必须落在父元素上：
-
overflow: hidden写在子元素上 → 只隔离子元素自身内外 margin，对父子关系无影响 - 父元素是
position: absolute或被transform提升为包含块 → 即使写了overflow: hidden，BFC 也可能未实际生效 - CSS 层叠中后面有
overflow: visible !important→ 直接覆盖掉 BFC 触发逻辑
display: flow-root 是更干净的替代方案
display: flow-root 是专为创建 BFC 设计的值，语义明确、无副作用：
- 不会像
overflow: hidden那样意外裁剪内容（比如弹出菜单、阴影、伪元素延伸） - 不改变滚动行为，也不影响
clip-path或mask的渲染边界 - 在 Flex/Grid 容器里加它无效——因为这些容器本身已是 BFC，浏览器会忽略冗余声明
margin-bottom 在 BFC 里“消失”不是 bug
当父元素启用了 BFC（无论用 overflow: hidden 还是 display: flow-root），最后一个子元素的 margin-bottom 不会撑开父容器高度，也不会外溢——这是规范行为：BFC 主动收容了该 margin，不让它向上传播。
立即学习“前端免费学习笔记（深入）”；
这时别急着删 margin-bottom，更稳妥的做法是：把留白责任交给父容器的 padding-bottom。它不受 BFC 影响，语义也更清晰：空隙属于容器，而非子元素的“额外延伸”。
真正容易被忽略的是，修复一个父子塌陷后，相邻兄弟容器之间可能突然出现兄弟级 margin 合并——那得统一用 margin-bottom 控制间距，而不是靠堆砌 BFC 解决。
