margin重叠是CSS规范定义的正常行为，指相邻或父子块级元素的垂直外边距合并为较大值；根源在于共用同一BFC，可通过display:flow-root、透明边框等方案隔离。
什么是 margin 重叠？它为什么总“不按预期走”
垂直方向上，两个相邻块级元素的 margin-top 和 margin-bottom 会自动合并成一个边距，取其中较大值（比如 margin-top: 20px + margin-bottom: 30px → 实际间距只有 30px）。更隐蔽的是父子间：子元素设了 margin-top，父元素顶部却“被顶开”，仿佛 margin “穿透”上去了——这其实是 margin 折叠（Margin Collapse）的典型表现，根源在于它们共处同一个 BFC（块级格式化上下文）。
触发新 BFC 是最干净的解法，但别乱用 overflow:hidden
让父容器生成独立的 BFC，就能隔离内部 margin，彻底阻断折叠。现代推荐写法是：
.container {
display: flow-root;
}
display: flow-root 是专为此设计的值，语义清晰、无副作用，且兼容所有主流浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）。比老方案更安全：
-
overflow: hidden虽有效，但可能意外裁剪position: absolute子元素或阴影 -
overflow: auto在某些滚动场景下会多出滚动条（哪怕内容没溢出） -
float或position: absolute会让元素脱离文档流，破坏原有布局逻辑
当必须兼容旧浏览器时，透明边框仍是可靠 fallback
如果项目需支持 IE11 或早期安卓 WebView，display: flow-root 不可用，此时最稳妥的降级方案是给父元素加一像素透明边框：
立即学习“前端免费学习笔记（深入）”；
.parent {
border-top: 1px solid transparent;
}
这个技巧之所以有效，是因为只要父元素存在 border、padding 或非空 content，就能阻止 margin 穿透。注意以下细节：
- 用
border-top比border更精准，只影响顶部折叠，不影响左右结构 - 千万别用
border: 0或border: none——它们不触发 BFC - 若父元素已有 border，但依然塌陷，说明 border 样式未生效（比如被 reset.css 清掉），请检查 computed styles
Flex/Grid 布局天然规避 margin 重叠，但别为它强行改结构
把父容器设为 display: flex 或 display: grid，其子项默认不再参与外部 margin 折叠——因为 Flex/Grid 容器自身就是 BFC，且子项的 margin 不再按传统块流规则计算。
不过要注意实际约束：
- 仅适用于父子关系明确、无需块流语义的场景（比如卡片列表、表单字段组）
- 兄弟元素间仍可能折叠，除非用
gap替代 margin（gap不参与折叠，且更可控） - 若原布局依赖
margin: auto居中，Flex 下要改用justify-content/align-items
真正容易被忽略的点是：**margin 折叠不是 bug，而是 CSS 规范定义的行为**。强行“修复”前，先确认是否真需要打破它——有时用 padding 控制间距反而更语义化、更易维护。
