外边距合并只发生在块级盒垂直方向相邻兄弟或父与首/尾子元素间，且无border/padding等隔离；overflow:hidden通过触发BFC阻止合并，但display:flow-root更安全。
外边距合并（Margin Collapse）到底什么时候发生
外边距合并只发生在块级盒（block-level box）的垂直方向，且必须满足：相邻兄弟元素之间，或父元素与第一个/最后一个子元素之间，且它们之间没有 border、padding、line box、clearance 等隔离。常见现象是：margin-top 和 margin-bottom 没有叠加显示，而是取较大值。
比如两个 p 元素分别设 margin-bottom: 20px 和 margin-top: 30px，实际间距只有 30px，不是 50px；又比如父容器没设 border 或 padding，子元素的 margin-top 会“冒”到父容器外，导致父容器顶部空白异常。
为什么 overflow: hidden 能阻止外边距合并
因为 overflow: hidden（只要值不是 visible）会触发该元素生成一个新的 BFC（Block Formatting Context）。在 BFC 中，内部盒子的垂直外边距不会与外部盒子合并——BFC 边界成了天然隔离带。
注意：不是 overflow: hidden 本身“吃掉”了 margin，而是它间接让元素成为 BFC 容器，从而约束了内部盒的布局行为。
- 触发 BFC 的其他方式还包括：
float不为none、position为absolute或fixed、display为flow-root（推荐替代方案）、contain: layout -
overflow: hidden有副作用：内容溢出会被裁剪，且可能影响滚动行为（如意外禁用内部自定义滚动）
更安全的替代写法：优先用 display: flow-root
display: flow-root 是专为创建无副作用 BFC 设计的属性，它既阻止外边距合并，又不改变溢出行为、不干扰滚动、不隐式改变盒模型表现。
.container {
display: flow-root; /* 推荐 */
}
/* 对比旧写法 */
.container {
overflow: hidden; /* 有效但有副作用 */
}
- 如果需要兼容 IE，
overflow: hidden仍是常用兜底 - 若父容器本就需隐藏溢出（如卡片截断文本），那
overflow: hidden就是顺手解法，不用额外加样式 - 别对 flex / grid 容器滥用此法——它们本身不参与常规 BFC 外边距合并逻辑，加了也无效
调试时怎么快速确认是不是外边距合并导致的异常
遇到“明明写了 margin 却没空隙”或“没写 margin 却有空隙”，先检查：
- 元素是否是块级盒（
display: block、inline-block不触发合并） - 上下相邻元素是否都处于同一个 BFC 中（即没有父级 BFC 隔离）
- 使用浏览器开发者工具的盒模型视图，看
margin是否被标灰或显示为“collapsed” - 临时给父容器加
border: 1px solid transparent，如果空隙消失，基本就是外边距合并
真正容易被忽略的是：BFC 触发条件看似简单，但 overflow 值必须是计算后非 visible——例如父元素 overflow: visible 但被祖先设了 overflow: hidden，那它自己仍不构成新 BFC。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
