兄弟元素间margin重叠的本质是浏览器按规范将相邻块级元素的垂直margin-top和margin-bottom合并为单个值（取较大者），而非相加；该行为仅发生在普通文档流中垂直相邻且无隔离层的块级盒之间，display:flow-root对其无效，真正解决需用gap、单向margin或物理隔离层。
兄弟元素间 margin 重叠的本质是什么
不是两个 margin “加在一起变大了”，而是浏览器按规范把相邻块级元素的垂直 margin-top 和 margin-bottom 合并成一个值——取较大者。比如 div:nth-child(1) { margin-bottom: 20px; } + div:nth-child(2) { margin-top: 30px; }，最终间距只有 30px，不是 50px。
这个行为只发生在普通文档流（display: block）中、垂直方向、无隔离层的相邻块级盒之间。一旦其中任一条件不满足，合并就中断。
display: flow-root 对兄弟重叠完全无效
给父容器加 display: flow-root 只能阻断**父子间**的 margin 合并（比如子元素 margin-top 穿透），但它**不改变子元素之间的关系**：只要这些子元素仍是块级、相邻、处于同一父容器内、且该父容器没额外隔离手段，它们的垂直 margin 依然会合并。
换句话说：flow-root 创建的是父容器自身的 BFC，但它的子元素仍在同一个格式化上下文里“面对面”，合并照常发生。
- 别指望靠一层
flow-root治愈整页兄弟间距 - 给子元素自己设
flow-root没用——它已脱离 normal flow，margin本就不参与合并 - 如果父容器已经是
display: flex或display: grid，再加flow-root是冗余的
真正能彻底阻止兄弟 margin 重叠的三种方式
必须打破“相邻块级 + 无隔离”这个链条。以下方法按推荐度排序：
-
用
gap替代margin：父容器设display: flex; flex-direction: column; gap: 20px，或display: grid; row-gap: 20px。子元素的margin不再参与合并，gap独立控制间距，且支持响应式单位（如gap: 1rem） -
单向 margin +
:last-child：所有兄弟统一只设margin-bottom，末项用:last-child { margin-bottom: 0 }。避免同时写margin-top和margin-bottom，从源头消除合并触发条件 -
插入物理隔离层：在两个兄弟元素之间加一个高度为
0的元素，比如<div style="padding: 0.01px"></div>或伪元素::after { display: block; height: 0; overflow: hidden; }。只要有padding、border或非空内容，就能打断合并链
为什么 overflow: hidden 在这里也不行
给父容器设 overflow: hidden 虽然也创建 BFC，但它对兄弟元素间的 margin 合并没有任何干预作用——BFC 隔离的是内外环境，不是内部子元素之间的交互规则。子元素仍处于同一 BFC 内部，垂直相邻时照样合并。
更麻烦的是，overflow: hidden 会裁剪 position: absolute 子元素、阴影、动画位移等，实际项目中容易引发新问题。
真正容易被忽略的一点是：兄弟重叠不是“需要修复的 bug”，而是布局体系的选择结果。如果你反复遇到这个问题，说明当前用 block + margin 组合管理间距的模式已经超出其适用边界——这时候换用 flex 或 grid 不是升级，而是回归 CSS 布局的合理分工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
