margin collapse的真实表现是：两个上下相邻块级元素的垂直外边距（如margin-bottom:40px与margin-top:20px）不相加，而是取较大值40px；这不是bug，是css规范定义的行为，仅发生于垂直方向块级元素间。
什么是 margin collapse 的真实表现
当你写两个上下紧挨的 <div>，一个设 <code>margin-bottom: 40px，另一个设 margin-top: 20px，它们之间的实际间距不是 60px，而是 40px——浏览器按规范把这两个垂直外边距“合并”了。这不是 bug，是 CSS 标准明确规定的 margin collapse 行为，只发生在块级元素的垂直方向。
触发 BFC 是最直接的隔离手段
BFC（Block Formatting Context）本质是一个独立渲染容器，内部的 margin 不会和外部元素合并。关键在于：只要父元素形成 BFC，它和子元素之间、或它的相邻兄弟之间，就不会发生 margin collapse。
以下写法都能创建 BFC，但推荐优先使用：
-
display: flow-root—— 专为此类问题设计，无副作用，现代浏览器全覆盖（Chrome 64+ / Firefox 59+ / Edge 79+） -
overflow: hidden—— 兼容性最好（IE6+），但要确认内部真没溢出内容，否则会被裁剪 -
display: flex或display: grid—— 如果父容器本就适合用布局系统，顺手加就能解决，且天然支持gap
错误示范：float: left 或 position: absolute 虽然也能创建 BFC，但会让元素脱离文档流，后续布局极易失控，不建议仅为了防 collapse 而用。
父子塌陷比兄弟塌陷更隐蔽
子元素的 margin-top “穿透”到父元素顶部，导致整个父容器上移——这是最常被误认为“样式没生效”的场景。根本原因是父元素没 border、没 padding、也没触发 BFC。
验证方式很简单：给父元素加 border: 1px solid transparent，塌陷立刻消失；换成 padding-top: 1px 也行，但会多占 1px 空间。
真正干净的解法是让父元素自己形成 BFC：
.parent {
display: flow-root;
}
.child {
margin-top: 30px;
}
此时 .child 的 margin-top 只作用于自身，不再影响 .parent 的位置。
别忽略 gap 属性对 margin 的替代价值
在 Flex 或 Grid 布局中，gap 是控制子项间距的原生方案，它完全绕开 margin collapse 机制，且语义更清晰。
例如：
.container {
display: flex;
flex-direction: column;
gap: 24px;
}
.item { /* 不需要写 margin */ }
注意：gap 在 Flex 中需 Chrome 89+/Firefox 63+，Grid 中兼容性更好（Chrome 57+/Firefox 52+）。如果目标环境较老，仍应回退到 display: flow-root 或 overflow: hidden。
真正容易被忽略的是：BFC 的创建必须落在“参与 collapse 的那个边界所属的共同祖先”上——比如父子塌陷，BFC 必须加在父元素；兄弟塌陷，则要加在其中一个的父容器（或两者共同父容器）上，而不是随便套个 <div> 就行。</div>
