Margin Collapse是CSS规范规定的垂直外边距合并行为，相邻块级元素的上下margin取较大值而非相加；display: flow-root是安全触发BFC阻止重叠的首选方案。
什么是Margin Collapse，为什么它让人困惑
外边距重叠（Margin Collapse）不是 bug，是 CSS 规范明确规定的渲染行为：相邻块级元素的垂直 margin-top 和 margin-bottom 会合并成一个，取其中较大的那个值。常见于父子元素之间（父容器没边框/内边距/内容分隔）、兄弟 div 之间、空块元素前后。
典型现象：margin-top: 20px 的子元素，放在 margin-top: 30px 的父容器里，结果父容器顶部只撑开 30px，而不是 50px；两个兄弟 div 各设 margin-bottom: 20px 和 margin-top: 15px，实际间距却是 20px，不是 35px。
这会让布局“不按预期走”，尤其在动态插入元素或复用组件时，间距突然变小/消失。
触发BFC就能阻止Margin Collapse吗
能，但得满足「真正触发」——不是加了 overflow 就一定生效，也不是所有 BFC 触发方式都适合生产环境。
立即学习“前端免费学习笔记（深入）”；
BFC（Block Formatting Context）是一个独立的渲染区域，内部的盒模型布局不受外部影响，外部也不影响内部。而 Margin Collapse 只发生在同一个 BFC 内的相邻块级盒之间。一旦父子或兄弟不在同一 BFC，重叠就失效。
关键点：
-
overflow: hidden、overflow: auto确实触发 BFC，但可能意外裁剪内容或出现滚动条 -
display: flow-root是现代首选：专为创建无副作用 BFC 设计，不改变溢出行为，兼容性已覆盖 Chrome 64+/Firefox 59+/Safari 15.4+ -
float: left或position: absolute虽然也触发 BFC，但会脱离文档流，通常不适合用于解决 margin 问题
哪些场景该用BFC，哪些不该硬套
用 BFC 解决 Margin Collapse，本质是“隔离布局上下文”。它适合：
- 父子重叠：给父容器加
display: flow-root，子元素的margin-top就不再和父容器的margin-top合并 - 兄弟重叠：给其中一个兄弟元素包裹一层
display: flow-root容器（比如用div包住第二个div），它们就分属不同 BFC，不再合并 - 清除浮动后仍要防重叠：浮动本身会触发 BFC，但清除浮动（如
clear: both）不等于创建新 BFC；此时在清除元素上加display: flow-root更可靠
不该硬套的情况：
- 表单控件、按钮等行内级元素：它们默认不参与块级 margin 重叠，加 BFC 没意义
- 已有
border或padding的父容器：只要父容器有非none的border或非零padding，父子 margin 就不会重叠，无需 BFC - Flex 或 Grid 容器子项：它们已脱离常规文档流，根本不会发生 Margin Collapse，加 BFC 是冗余操作
为什么display: flow-root比overflow: hidden更安全
overflow: hidden 触发 BFC 的同时，会强制裁剪超出容器的内容——哪怕只是文字换行异常、下拉菜单、Tooltip、阴影溢出，都会被截断，调试时很难定位。
display: flow-root 则只做一件事：创建一个不影响溢出行为的 BFC。它保持内容可见性，不引入额外样式副作用，语义清晰。
示例对比：
.parent {
margin-top: 30px;
}
.child {
margin-top: 20px; /* 会和父级合并，最终只有 30px */
}
修复写法：
.parent {
display: flow-root; /* ✅ 推荐 */
margin-top: 30px;
}
.child {
margin-top: 20px; /* 现在父子 margin 不再合并，总高度 = 30 + 20 */
}BFC 不是万能胶，它解决的是“重叠发生的位置”，而不是“要不要这个 margin”。如果设计本意就是紧凑排列，强行加 BFC 反而破坏视觉节奏。真正要盯住的，是那些 margin 行为和设计稿明显不符、且查不出其他干扰样式的地方。
