父子元素 margin 合并是 CSS 规范行为，并非失效；当父元素无 border/padding/overflow 隔离时，其内容区顶边与子元素 margin-top 直接接触并取较大值合并，导致父容器下移或高度塌陷；可用 overflow: hidden（触发 BFC）或更优的 display: flow-root 解决，也可改用 padding、gap、transform 等规避合并。
父子元素的 margin-top 或 margin-bottom “失效”，其实是子元素外边距穿透到了父容器外部——这不是样式没生效，而是 CSS 规范定义的 margin collapsing 行为在起作用。
为什么子元素的 margin-top 会让父容器一起下移？
当父元素是普通文档流中的块级盒、且没有 border、padding、overflow: hidden 等隔离层时，它的内容区顶部会与第一个子元素的 margin-top 直接接触。此时两者发生合并，浏览器取较大值，并把这个合并后的 margin 应用在父容器的边界上，造成“父容器被顶下来”的错觉。
常见错误现象：
- 给子元素设
margin-top: 40px，结果父容器整体下移，子元素相对父容器的位置没变 - 父容器高度塌陷（比如高度为 auto 且无其他内容），看起来像“消失”了一截
用 overflow: hidden 阻断合并，但要注意副作用
给父元素设置 overflow: hidden（或 auto、scroll）是最常用手段，原理是触发 BFC（块格式化上下文），让父容器边界成为“隔离墙”，阻止内外 margin 接触。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
overflow: hidden在 IE8+ 全面兼容，适合老项目快速修复 - 但它可能意外裁剪溢出内容（比如带阴影、动画位移、下拉菜单的子元素）
- 若父容器本就需要滚动，优先用
overflow: auto，比hidden更安全 - 不要只为防合并而加
overflow——先确认是否真有内容会溢出
现代推荐：用 display: flow-root 替代
display: flow-root 是专为解决这类问题设计的值，它强制创建 BFC，但不改变盒模型行为，也不影响溢出处理或布局流。
使用场景：
- 包裹卡片列表、文章段落、表单字段组等易出现父子坍塌的结构
- 替代那些仅为了防坍塌而写的
overflow: hidden或透明边框 - 兼容性已足够好：
Chrome 64+、Firefox 58+、Safari 15.4+（2026 年基本可视为全覆盖）
示例：
.card-list {
display: flow-root;
}
.card {
margin-top: 24px;
}
此时每个 .card 的 margin-top 都会正常作用于自身，不再与父容器合并。
更底层的规避思路：别依赖 margin 控制父子间距
真正难调试的，往往是嵌套多层、动态插入子项的组件（比如评论区、折叠面板）。这时硬塞 flow-root 或 overflow 可能治标不治本。
更稳健的做法：
- 把原本写在子元素上的
margin-top，改到父元素的padding-top上（前提是父容器背景/边框允许） - 用
gap配合display: flex或grid布局，完全绕过 margin 合并逻辑 - 对空父容器，避免只靠子元素 margin 定位；改用
position: relative+top或transform: translateY()
关键点在于：margin collapsing 不是 bug，但把它当作布局工具，迟早会在某个嵌套层级或渲染时机里漏出来。真正稳定的方案，是让合并“没机会发生”。
