这是css外边距折叠现象：子元素margin-top因父元素缺乏padding、border或bfc触发属性而与父元素上边缘合并，导致父元素下移；可通过padding-top替代、display:flow-root或overflow:hidden等方案解决。
为什么子元素的 margin-top 会让父元素“掉下去”
这不是 bug，是 CSS 规范定义的外边距折叠（Margin Collapsing）：当父元素没有 padding、border、内容或 BFC 触发属性，且子元素是第一个块级子元素时，它的 margin-top 会直接和父元素的上边界合并。浏览器把这段距离算在父元素身上，所以看起来是父元素整体下移了。
用 padding-top 替代 margin-top 最稳妥
把原本写在子元素上的 margin-top: 20px，挪到父元素上写成 padding-top: 20px，就能彻底绕过折叠逻辑——padding 不参与折叠，语义也更准确（这是容器内部的留白，不是子元素自己的“推力”）。
- 适合卡片、表单区块、模块化布局等需要统一内边距的场景
- 注意别混用：如果父元素已设
padding-top: 20px，子元素再加margin-top: 10px，结果就是 30px，容易误判间距来源 - 对像素敏感的布局（比如和设计稿严格对齐），要记得
padding会真实增加父元素高度
触发 BFC 是根治方案，但选哪个属性要看场景
BFC（块级格式化上下文）能让父元素成为外边距折叠的“隔离墙”。关键不是“让 margin 生效”，而是“不让它穿透出去”。
-
display: flow-root：专为触发 BFC 设计，无裁剪、无定位副作用，Chrome 64+/Firefox 62+ 支持，现代项目首选 -
overflow: hidden：兼容性好（IE8+），但会真实裁剪溢出内容——下拉菜单、Tooltip、绝对定位箭头都可能被砍掉 -
overflow: clip：比hidden更语义化，不触发滚动条，但仅支持较新浏览器（如 Chrome 90+、Safari 15.4+） -
border-top: 1px solid transparent：视觉无影响，在box-sizing: border-box下不额外增加总尺寸，适合老项目微调
哪些写法看着能用，其实埋了坑
有些方案短期有效，但长期维护成本高，或者只在特定条件下成立：
-
position: relative虽然能触发 BFC，但会创建新层叠上下文，干扰已有z-index逻辑 -
float: left或display: inline-block会改变父元素的文档流行为，可能破坏居中、宽度自适应等原有布局 - 给子元素加
margin-top同时又给父元素加padding-top，属于叠加干预，反而让间距逻辑变模糊 - 在 CSS-in-JS 环境里写
overflow: 'hidden'，某些新版库会自动转成overflow: 'clip'——而后者不触发 BFC，问题照旧
真正起作用的永远是父元素是否设置了能阻断折叠的“隔离层”，而不是子元素写了多少个 margin-top。哪怕只改一行 CSS，也要想清楚：你是在修视觉，还是在修渲染规则本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
