外边距合并是相邻块级元素垂直margin取较大值而非相加的规范行为；常见于div堆叠、h1后p、父子间；可用bfc阻断，推荐display: flow-root。
什么是外边距合并（margin collapse）
两个相邻块级元素的垂直 margin 会“叠”在一起，取较大值，而不是相加。这不是 bug，是 CSS 规范定义的行为。常见于：div 堆叠、h1 后紧跟 p、父元素和第一个/最后一个子元素之间。
典型表现：你写了 margin-top: 20px 和 margin-bottom: 20px，结果元素间只空了 20px，不是 40px；或者父容器高度“塌陷”，明明子元素有 margin-top，却顶到父容器顶部。
用 BFC 阻断外边距合并的实操方式
BFC（Block Formatting Context）是一个独立渲染区域，内部的布局不与外部干扰，天然隔离 margin 合并。触发 BFC 的方式很多，但要注意兼容性和副作用：
-
overflow设为hidden、auto或scroll—— 最常用，但可能意外截断阴影或下拉菜单 -
display设为flow-root—— 现代首选，语义清晰、无副作用，Chrome 64+/Firefox 58+ 支持 -
float不为none—— 已淘汰，会脱离文档流，引发其他布局问题 -
position为absolute或fixed—— 同样脱离流，不适合用于单纯防合并
推荐写法：
.container { display: flow-root; }比 overflow: hidden 更干净，也不影响滚动或溢出表现。
哪些场景必须用 BFC，而不是调小 margin
单纯把 margin 改成 padding 或减数值，只是绕开问题，不是解决根本原因。真正需要 BFC 的情况包括：
- 组件封装时，子元素自带默认
margin（如h2、p），你不希望它和父容器“粘连” - 卡片类容器，内容区需与上下边界保持一致距离，但内部段落又不能压缩间距
- 使用 CSS-in-JS 或 Shadow DOM 时，样式隔离有限，BFC 是最可控的边界手段
- 响应式中，某断点下需启用 margin 合并，另一断点下禁用——此时靠 BFC 开关比重写所有 margin 更稳定
容易被忽略的 BFC 边界细节
BFC 不是万能胶，它只对「参与当前 BFC 的元素」起作用。几个关键点：
- 父子合并不会因子元素触发 BFC 而消失——必须让父元素自己形成 BFC
-
display: inline-block也能触发 BFC，但会带来基线对齐问题，慎用 - Flex 或 Grid 容器内部不发生外边距合并，但这不是 BFC 的功劳，而是布局模型不同，别混为一谈
- 如果用了
flow-root还没生效，检查是否被更高级别的display覆盖（比如父级是flex，子级flow-root就不构成新 BFC）
最常漏掉的一点：BFC 阻断的是「块级盒之间的垂直 margin 合并」，不影响水平方向，也不影响行内元素——别指望它解决 span 间的间距问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
