display: flow-root 是解决父子 margin 重叠的最优解，它创建 BFC 阻断合并且无裁剪副作用；兼容主流浏览器，需作用于父容器而非子元素。
父子元素 margin 重叠不是 bug，是 CSS 规范定义的 margin collapsing 行为；它只发生在垂直方向、普通文档流中、且父元素没有 border/padding/内容分隔时。真正要解决的，不是“阻止子元素设 margin”，而是让父容器边界成为隔离层。
为什么 overflow: hidden 能“修复”但不推荐无脑用
它通过触发 BFC（块格式化上下文），把父容器变成一个独立渲染区域，从而阻断父子 margin 接触。但副作用很实际：
-
overflow: hidden会裁剪所有溢出内容——比如box-shadow、transform: translateY(-10px)的子元素、position: absolute的下拉菜单，都可能被意外切掉 - 在 IE8+ 兼容性好，适合老项目救急，但现代项目里不该把它当默认方案
- 如果父容器本就需要滚动，
overflow: auto比hidden更安全，但依然有潜在裁剪风险
display: flow-root 是当前最优解
它是专为这类问题设计的 display 值，语义清晰：创建 BFC，但不改变盒模型、不触发滚动、不裁剪内容、不影响定位子元素。
兼容性已覆盖主流环境（Chrome 64+ / Firefox 58+ / Safari 15.4+），2026 年绝大多数项目可直接使用：
/* 推荐写法 */
.parent {
display: flow-root;
}
.child {
margin-top: 24px;
}
注意：不要加在子元素上，必须作用于父容器本身；加在子元素上对父子合并无效。
替代方案要按场景选，别硬套
有些情况改用其他布局方式更自然，也更少副作用：
- 父容器用
display: flex或display: grid：子项 margin 不再合并，间距 = 各自 margin 之和，但需注意 flex/grid 会改变子元素默认排列行为 - 用
padding-top替代margin-top：语义更准确（空隙属于父容器内部），且完全规避合并，但需确认设计是否允许“内边距”语义 - 极老项目（如需支持 IE9-）可用
border-top: 1px solid transparent或padding-top: 0.1px，物理隔断合并条件，副作用最小
真正容易被忽略的是：兄弟元素之间的 margin 合并，和父子合并是两套机制，不能靠同一个 display: flow-root 同时解决；如果同时存在父子和兄弟合并问题，得分别处理父容器和相邻兄弟的包裹结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
