避免 margin 合并最可靠的方式是创建 BFC，推荐使用 display: flow-root；也可通过添加 border/padding、改用 flex/grid 布局或定位等方式实现，需避免 overflow:hidden 等副作用。
要避免 CSS 中的 margin 合并（Margin Collapse），核心思路是**让相关元素脱离普通文档流的块级上下文，或创建新的 BFC（Block Formatting Context）**。BFC 确实是最常用、最可靠的解决方案之一，但它不是唯一方式，也需理解何时及为何生效。
什么是 margin 合并？
margin 合并在块级元素间发生，常见于以下情况：
- 相邻兄弟元素的垂直 margin 会取较大值，而非相加；
- 父元素与第一个/最后一个子元素之间，若无边框、内边距、内容分隔，会发生外边距“穿透”，导致父容器高度塌陷或位置偏移。
利用 BFC 阻断 margin 合并
BFC 是一个独立的渲染区域，内部元素的布局不会影响外部，且 BFC 内部的 margin 不会与外部元素合并。触发 BFC 的常见方式有：
- overflow 值不为 visible（如 hidden、auto、scroll）；
- display 为 flow-root（推荐！语义清晰、无副作用）；
- float 值不为 none；
- position 为 absolute 或 fixed；
- contain 值为 layout、content 或 paint。
✅ 推荐写法（现代、干净）：
.container { display: flow-root; }
它专为解决此类问题设计，不影响布局流，也不触发滚动或隐藏溢出等副作用。
其他实用避坑方法
不依赖 BFC 也能解决具体场景：
立即学习“前端免费学习笔记（深入）”；
- 给父元素加 border-top/bottom 或 padding-top/bottom（哪怕 1px 或 0.1px），即可阻断父子 margin 合并；
- 用 flex 或 grid 布局替代 block 布局，它们天然不触发 margin 合并；
- 对子元素使用 margin-top: auto（在 flex 容器中）或定位方式替代常规 margin，从源头规避。
注意：BFC 不是万能银弹
触发 BFC 虽能阻止 margin 合并，但也可能带来意料之外的影响：
- overflow: hidden 可能裁剪阴影、下拉菜单等溢出内容；
- float 会脱离文档流，影响后续布局；
- position: absolute 会让元素脱离布局上下文，不再参与高度计算。
所以优先选 display: flow-root 或结合 padding/border 这类轻量干预手段。
