父子 margin 合并本质是外边距塌陷，属 CSS 规范行为；最稳妥解法是 display: flow-root 创建无副作用 BFC，兼容现代浏览器；兜底可用 border: 1px solid transparent 或 padding-top: 0.1px。
父子 margin 合并的本质是“外边距塌陷”
这不是 bug，而是 CSS 规范定义的行为：当父元素没有 border、padding、inline content 或 BFC 上下文时，子元素的 margin-top 会“穿透”父元素，直接与父元素的 margin（或文档流顶部）合并。结果就是——你设了 margin-top: 20px 给子元素，但父元素整体下移了 20px，子元素在父容器内却像没设 margin 一样紧贴顶部。
最稳妥的现代解法：用 display: flow-root
这是专为解决此类问题而生的 display 值，它会创建一个无副作用的 BFC，既不改变布局流，也不影响 overflow 行为，兼容性也足够好（Chrome 64+/Firefox 58+/Safari 15.4+，Edge 79+）。
.parent {
display: flow-root;
}
.child {
margin-top: 20px;
}
- ✅ 不需要加 border/padding，视觉零干扰
- ✅ 不触发滚动条（
overflow: hidden可能意外裁剪内容） - ❌ IE 完全不支持——若需兼容 IE，改用
overflow: hidden或border: 1px solid transparent
快速兜底方案：加 1px 透明边框或极小 padding
只要父元素存在非零的 border 或 padding，就能物理阻断 margin 塌陷。关键是“存在”，不一定要可见。
-
border-top: 1px solid transparent—— 最常用，兼容所有浏览器 -
padding-top: 0.1px—— 更轻量，但某些旧版 Safari 对 sub-pixel 渲染不稳定 -
border: 1px solid #fff—— 若父背景是白色，也算“视觉透明”，但不如transparent可靠
别踩坑：这些“看起来有效”但实际危险的做法
有些方案能止住塌陷，但会带来更隐蔽的问题：
立即学习“前端免费学习笔记（深入）”；
-
position: absolute确实让父元素脱离文档流、不再塌陷，但子元素也跟着脱离流，后续布局完全失控 -
float: left虽然触发 BFC，但会让父元素收缩、可能影响兄弟元素排版，已不推荐用于布局隔离 - 只改子元素用
padding-top替代margin-top—— 表面可行，但一旦该子元素需要响应式隐藏/显示，padding 就成了“不可撤销的占位”，比 margin 难维护
真正关键的不是“怎么让它不塌”，而是“怎么在不破坏布局语义的前提下让它不塌”。flow-root 和 border: 1px solid transparent 是目前平衡性最好的两个选择。
