margin collapse 是 CSS 规范定义的垂直相邻块级元素外边距取较大值而非相加的行为；嵌套中“失效”实为子元素 margin 穿透父容器与外层合并，触发条件是无 border/padding/content 且未创建 BFC；用 display: flow-root 或 overflow: hidden 可阻断。
什么是 margin collapse，它为什么在嵌套布局里突然“失效”或“过猛”？
margin collapse（外边距合并）不是 bug，是 CSS 规范定义的行为：相邻的块级元素垂直方向上的 margin-top 和 margin-bottom 会取较大者，而不是相加。但在嵌套场景中，比如父容器没边框、没内边距、没内容分隔，且子元素有 margin-top，这时子元素的上外边距会“穿透”父容器，直接作用到父容器的父级上——看起来像“失效”，其实是合并到了更外层。
常见现象：
- 父容器设置了
background-color，但顶部空白却不在父容器内，而是出现在它上面 - 给第一个子元素设
margin-top: 20px，结果整个父容器上移了 20px，而非子元素相对父容器下移 - 多个连续子
div的margin-bottom和下一个的margin-top合并，导致间距比预期小
触发条件（必须同时满足）：
- 元素都是普通流中的块级盒（
display: block） - 垂直相邻（无 border/padding/content 分隔）
- 没有创建新的 BFC（Block Formatting Context）
用 BFC 阻断 margin collapse，比 clearfix 更现代也更精准
clearfix 是为解决浮动塌陷设计的，对 margin collapse 无效；真正能隔离外边距合并的是 BFC。只要父容器形成 BFC，它的子元素外边距就不会和外部合并，也不会穿透。
立即学习“前端免费学习笔记（深入）”；
常用且安全的 BFC 触发方式（按推荐顺序）：
-
overflow: hidden（或auto、scroll），兼容性好，无副作用，最常用 -
display: flow-root（现代标准写法，语义清晰，无溢出隐藏副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 支持） -
float: left或right（不推荐，会脱离文档流） -
position: absolute（同样脱离流，不适合布局容器）
示例：
.parent {
display: flow-root; /* ✅ 推荐：干净阻断合并，不影响布局 */
}
.child {
margin-top: 20px; /* 不再穿透，老老实实顶着父容器上边缘 */
}注意：display: flex 或 grid 容器也自动形成 BFC，但会改变子项的布局行为（变成 Flex Item/Grid Item），不是“纯块级嵌套”的等价替代。
哪些情况不能靠 BFC 解决？得换思路
BFC 对以下情况无能为力：
- 父子间本就不该有外边距合并，但你误用了
margin（比如想撑开父子间距，却在子元素上写margin-top） - 子元素是 inline-level（如
span）或display: inline-block，它们不参与 margin collapse - 使用了
transform、filter等会隐式创建新层叠上下文（stacking context）的属性，可能间接影响外边距渲染逻辑（但不改变合并规则）
更稳妥的替代方案：
- 用
padding代替子元素的margin（如父容器设padding-top: 20px） - 用
border-top: 1px solid transparent（最小代价打破合并条件） - 直接给父容器设
margin，而非依赖子元素推动
实际项目里最容易忽略的一点
display: flow-root 在 Safari 15.4 之前不支持，如果要兼容旧 Safari（如 iOS 15.2 及更早），overflow: hidden 仍是兜底首选。但要注意：若父容器内部真有横向溢出内容（比如长表格、代码块），overflow: hidden 会裁剪，此时必须加 overflow-x: auto 显式放开横轴，否则交互出问题。
别指望一个属性解决所有嵌套外边距问题——先判断是不是真需要 margin collapse，还是只是没选对布局工具。
