overflow: hidden 能阻止 margin 合并是因为它触发 bfc，使子元素与外部脱离同一格式化上下文；规范规定外边距重叠仅发生在同属一个 bfc 的相邻块级盒子间。
overflow: hidden 为什么能阻止 margin 合并
它不是“修复”了 margin，而是让父容器创建了一个新的 BFC（块级格式化上下文），把参与合并的元素隔开。CSS 规范明确规定：外边距重叠只发生在**同属一个 BFC 的相邻块级盒子之间**。一旦父元素触发 BFC，它的子元素就和外部环境不再处于同一布局上下文，父子或兄弟间的 margin 就失去合并条件。
哪些 overflow 值真正有效
只有能创建 BFC 的 overflow 值才起作用：
-
overflow: hidden—— 最常用，但会裁剪溢出内容 -
overflow: auto和overflow: scroll—— 同样触发 BFC，但可能意外出现滚动条 -
overflow: clip—— 新标准值，语义更准确，但Safari 15.4+才支持 -
overflow: visible—— 无效，这是默认值，不触发 BFC -
overflow-x: hidden; overflow-y: visible—— 行为不统一，别依赖
注意：overflow 在 position: fixed 或 position: absolute 元素上可能不生效，因为脱离文档流后 BFC 触发逻辑变复杂。
为什么 display: flow-root 比 overflow: hidden 更推荐
display: flow-root 是专为创建无副作用 BFC 设计的，而 overflow: hidden 的本职是控制溢出，不是防合并：
-
overflow: hidden会裁剪box-shadow、position: absolute的下拉菜单、tooltip 等所有超出边界的内容 - 旧版 Safari 中配合
transform动画可能闪烁 - 给两个兄弟元素都加
overflow: hidden，它们仍在同一父 BFC 内，margin 依然合并 -
display: flow-root不改变盒尺寸、不触发滚动、不影响offsetHeight计算，语义也更清晰
兼容性方面：flow-root 在 Chrome 58+、Firefox 55+、Safari 10.1+、Edge 79+ 已稳定支持；IE 完全不支持，需降级用 overflow: hidden 或 padding-top: 0.1px。
常见误用和调试盲点
最常踩的坑不是写错属性，而是没搞清「谁该触发 BFC」：
- 父子 margin 塌陷，必须在 父元素 上设
display: flow-root或overflow: hidden，而不是子元素 - 兄弟元素合并，要把其中一个包进新 BFC 容器里，比如
<div style="display: flow-root"></div>，而不是给两个都加 - 如果父容器已是
display: flex或display: grid，再加flow-root无效——它们自身已创建格式化上下文 - 开发者工具里看到 margin 显示为灰色或标着 “collapsed”，就是合并发生的明确信号
BFC 是局部屏障，不是全局开关。你在某个父容器上加了 display: flow-root，只隔离它内部的父子/兄弟重叠，它和外部其他元素之间仍可能重叠。别指望加一层就一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
