这是css外边距折叠规范行为：父元素无border-top、padding-top、内容且未触发bfc时，子元素margin-top与其上边界合并，致父元素整体下移；推荐用display:flow-root触发bfc根治，语义清晰、无裁剪副作用，chrome64+/firefox59+/safari15.4+均支持。
子元素margin-top让父元素下移是外边距折叠，不是bug
这是 CSS 规范明确定义的行为，叫外边距折叠（margin collapse）：当父元素没有 border-top、没有 padding-top、内容为空、且未触发 BFC 时，第一个子元素的 margin-top 会直接和父元素的上边界合并——浏览器把这 20px 算在父元素“外面”，导致整个父元素被往下推，但自身高度不变。
常见误判包括：
• Computed 面板里父元素 margin-top 显示为 20px，但 Styles 里你根本没写
• 设计稿顶部对齐总差几像素
• 父容器看起来“悬空”，和上一个兄弟元素之间多出一段空白
最稳妥的解法：给父元素加display: flow-root
这是专为解决这类问题设计的现代方案，它创建 BFC，但不裁剪内容、不改变盒模型尺寸、也不影响子元素定位或层叠上下文。
实操建议：
- 直接在父元素样式中写
display: flow-root，无需额外 hack - 兼容性没问题：Chrome 64+ / Firefox 59+ / Safari 15.4+（2026 年主流环境全覆盖）
- 比
overflow: hidden更干净——后者会意外裁剪position: absolute子元素、下拉菜单、tooltip 等真实溢出内容 - 若项目需兼容 IE 或老 Safari，再降级用
overflow: hidden或伪元素清除法：::before { content: ""; display: table; }
替代方案对比：为什么padding-top比border-top更推荐
两者都能物理阻断折叠，但语义和副作用差异很大。
用 padding-top：
- 语义准确：你想的是“容器内部留白”，不是“加个看不见的边框”
- 不干扰盒模型：无论
box-sizing是什么值，都不会额外增加高度 - 注意别混用：如果父元素已设
padding-top: 20px，子元素再加margin-top: 10px，结果就是 30px，调试时容易误判来源
慎用 border-top: 1px solid transparent：
- 视觉虽无变化，但会参与
box-shadow渲染，有时边缘发虚 - JS 调用
getBoundingClientRect().height时，多出的 1px 会被计入，可能影响后续逻辑 - 团队协作中，别人看到这个 border 很可能以为是设计需求，不敢删改
Flex 布局天然免疫，但要注意方向
只要父元素是 display: flex 或 display: inline-flex，子元素的 margin-top 就不会导致父元素位移——Flex 布局有自己的对齐规则，不走传统外边距折叠逻辑。
关键细节：
- 必须补上
flex-direction: column（如果子元素是竖排），否则默认row会让子元素横着排，margin-top变成无效值 - 哪怕只为了修复这一个问题，把普通
<div> 改成 <code>display: flex也是合理选择 - 注意：Flex 容器内子元素的
margin仍可能与其他 Flex 项发生合并（比如兄弟项间），但父子穿透问题彻底消失
真正要防的不是“怎么加”，而是“加在哪一层”——塌陷会向上穿透所有无隔离的祖先。所以必须在**离出问题子元素最近的那个父容器**上加
display: flow-root 或 padding-top，否则修了 A 层，B 层照样掉。
