子元素margin-top导致父容器下移是CSS规范定义的外边距塌陷行为，因父元素无border/padding/BFC隔离而与子元素margin合并；解决应直接在父容器设display:flow-root或padding-top:0.1px，避免overflow:hidden裁剪内容。
直接给父容器加 display: flow-root 或改用 padding-top 最稳；overflow: hidden 能“修好”，但会裁剪下拉菜单、tooltip、绝对定位子元素等真实内容，不是万能解。
为什么子元素的 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无兼容问题）
真正容易被忽略的点：塌陷往往不是孤立现象
如果你靠 overflow: hidden 修好了一个父容器，但相邻兄弟容器又开始错位，大概率是兄弟间也发生了相邻塌陷——那得回到 margin 使用习惯上调整，比如统一只设 margin-bottom，而不是到处加 overflow。
另外，检查开发者工具里父元素的 computed margin-top 值是否异常小（比如设了 20px 却显示 0），再临时加个 background 或 border 看子元素是否“贴着”父顶部——这才是确认塌陷发生的可靠方式。
