直接给父容器加display:flow-root或改用padding-top最稳；因子元素margin-top在父无border/padding/BFC时会与父margin合并向上穿透，导致父容器整体下移，这是CSS规范行为而非bug。
直接给父容器加 display: flow-root，或者把子元素的 margin-top 换成父容器的 padding-top——这两种方式最稳，不破坏布局、无副作用、兼容性够用。
为什么子元素的 margin-top 会让父容器“一起往下跑”
这不是 bug，是 CSS 规范明确要求的行为：当父容器没有 border、没有 padding、内容为空、且未触发 BFC 时，子元素的 margin-top 会和父容器的 margin 合并，向上“穿透”出去。结果就是你设了 24px，整个父容器却从页面顶部往下移了 24px，顶部空白消失。
常见误操作包括：
- 只改子元素：比如加个 wrapper div 再设
display: flow-root，没用——BFC 必须由“参与合并”的那个父元素自身触发 - 用
overflow: hidden但忘了它会裁剪position: absolute子元素或下拉菜单 - 给子元素加
float或position: absolute，虽然能打断 collapse，但会让元素脱离文档流，引发新问题
display: flow-root 是什么，为什么它比 overflow:hidden 更合适
display: flow-root 是专为解决这类问题设计的现代方案，它会创建一个独立的 BFC，但不裁剪内容、不改变盒模型尺寸、也不影响子元素定位。Chrome 64+ / Firefox 58+ / Safari 15.4+ 全支持，日常项目可放心用。
典型写法：
.container {
display: flow-root;
}
.container > p {
margin: 20px 0;
}
注意：display: flow-root 必须加在父容器上，不是兄弟元素各自加——BFC 隔离的是“容器与其后代”，不是“同级兄弟”。如果要解决兄弟元素之间的 collapse，只用其中一个包进 flow-root 容器即可。
padding-top: 0.1px 这种“微调”为什么有效
只要父容器有了哪怕 0.1px 的 padding-top，就足以打断 margin collapse 的条件链（规范要求“中间无 border/padding/内容隔开”）。这个值视觉完全不可见，也不影响布局尺寸，比 border-top: 1px solid transparent 更轻量。
适用场景：
- 组件库封装时不能改子元素 margin，只能动父容器
- 需要保留原有 margin 语义（比如设计系统规定统一用 margin 控制间距）
- 兼容老浏览器（
flow-root在 IE 和旧 Safari 不支持，而padding无兼容问题）
别用 margin-bottom + :last-child 清除来“模拟” padding 效果——那只是绕开问题，不是打断 collapse 条件。
真正关键的判断点在于：你是在修复父子塌陷，还是兄弟合并？前者必须动父容器，后者得让至少一个元素脱离当前 BFC；而所有“只改子元素”的尝试，基本都无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
