边距合并只发生在块级元素垂直方向相邻且同属一个BFC时，合并margin-top与margin-bottom；触发BFC（如overflow:hidden、display:flow-root）可阻止合并。
边距合并到底在合并谁的 margin
边距合并（margin collapse）只发生在**块级元素的垂直方向**，且必须满足：相邻、同属一个 BFC、都没有 padding/border 分隔。不是所有 margin 都会合并——display: inline 元素、浮动元素、绝对定位元素、flex 项、grid 项，通通不参与。
常见错误现象：div 套 div，内层 margin-top 消失，外层“被顶上去”；两个兄弟 p 之间实际间距只有较大那个 margin-bottom，不是相加。
- 只合并
margin-top与margin-bottom，左右 margin 从不合并 - 父容器和第一个/最后一个子元素之间也可能发生外边距合并（称为“外边距穿透”）
- 空块级元素（如
）两端 margin 会直接合并成一个
哪些方式能创建 BFC 并阻止合并
BFC 是一个独立渲染区域，内部布局不受外部影响，外部也不影响内部——关键在于「隔离」。只要触发 BFC，相邻块级元素的垂直 margin 就不再合并。
常用可靠方式（按推荐顺序）：
-
overflow设为hidden、auto或scroll（注意：visible不行） -
display设为flow-root（现代首选，语义清晰，无副作用） -
float设为left或right（但会脱离文档流，慎用） -
position设为absolute或fixed（同样脱离流） -
display设为table-cell、table-caption、inline-block（有隐式行为或对齐干扰）
性能提示：overflow: hidden 在某些老浏览器中可能触发重绘，display: flow-root 是最干净的选择，但 IE 完全不支持。
为什么 overflow: hidden 有时没效果
不是写上就生效。BFC 触发前提是该元素本身是块级容器，且样式真正应用到了它身上。
典型失效场景：
- 元素被设为
display: inline或display: none，此时overflow无效 - CSS 选择器权重不够，被其他规则覆盖（检查 computed styles 中
overflow是否真的为hidden） - 父元素设置了
display: flex或display: grid，子元素即使设了overflow: hidden，也因 flex/grid 项不形成 BFC 而无效 - 用了
will-change: transform等属性，意外改变了层叠上下文或渲染模型
验证方法：打开 DevTools → Elements → 查看该元素的 Layout 面板，确认 “Block formatting context” 已标记为 true。
display: flow-root 的真实使用姿势
这是专为解决这类问题而生的值，没有 overflow: hidden 的裁剪副作用，也不像 float 那样破坏布局流。
正确用法示例：
.container {
display: flow-root;
}
.container > p {
margin: 20px 0;
}
这样每个 p 的上下 margin 都会保留，不会合并，也不会撑开父容器以外的空间。
兼容性注意点：
- Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 支持
- IE 完全不支持，需回退到
overflow: hidden或伪元素清除法 - 若项目需支持旧版 Safari（overflow: hidden
别忘了：BFC 只阻断垂直 margin 合并，不影响水平方向，也不解决塌陷高度之类的问题——那是另一个维度的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
