父元素下移是因外边距折叠：子元素margin-top与无padding/border/BFC的父元素上边界合并；最稳妥解法是用padding-top替代，根治方案为display:flow-root触发BFC，overflow:hidden虽有效但会裁剪溢出内容。
直接加 overflow: hidden 能止住下移，但不是因为它“隐藏了什么”，而是它触发了 BFC——这才是真正起作用的机制。
为什么父元素会跟着子元素的 margin-top 下移
这不是 bug，是 CSS 规范定义的外边距折叠（Margin Collapsing）：当父元素没有 padding-top、border-top，也没创建 BFC，且子元素是第一个块级子元素时，它的 margin-top 会直接和父元素上边界合并。浏览器把这段距离算在父元素自身 margin 上，所以整个父容器看起来“掉下去”了。
常见错误现象包括：div 突然和上一个兄弟元素拉开一大段空白，检查 computed 样式却发现父元素的 margin-top 变成了子元素的值；或者设计稿对齐总差几像素，反复调 margin 没用。
最稳妥的解法：用 padding-top 替代 margin-top
把原本写在子元素上的 margin-top: 20px，挪到父元素上写成 padding-top: 20px，就能彻底绕过折叠逻辑——padding 不参与折叠，语义也更准确（这是容器内部留白，不是子元素向外的“推力”）。
- 适合卡片、表单区块、模块化布局等需要统一内边距的场景
- 注意别混用：如果父元素已设
padding-top: 20px，子元素再加margin-top: 10px，结果就是 30px，容易误判间距来源 - 对像素敏感的布局（比如和设计稿严格对齐），要记得
padding会真实增加父元素高度
根治方案：触发 BFC，但选哪个属性要看副作用
display: flow-root 是现代项目首选：专为触发 BFC 设计，无裁剪、无定位副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 都支持。
overflow: hidden 兼容性好（IE8+），但它会真实裁剪溢出内容——下拉菜单、Tooltip、绝对定位箭头都可能被砍掉；若父元素已有 overflow: auto 或 scroll，其实已经触发 BFC，不必额外加 hidden。
border-top: 1px solid transparent 在 box-sizing: border-box 下不额外撑大容器，视觉无影响，适合必须保留溢出行为的老项目或滚动容器。
以下写法看着能用，实际埋坑：position: relative 虽然触发 BFC，但会创建新层叠上下文，干扰已有 z-index；float: left 会破坏居中和宽度自适应；overflow: 'hidden' 在某些 CSS-in-JS 库里会被自动转成 overflow: 'clip'，而后者不触发 BFC。
Flex 布局天然免疫，但要注意默认方向
只要父元素设 display: flex 或 display: inline-flex，子元素的 margin-top 就不会导致父元素位移——Flex 布局有自己的对齐规则，不走传统外边距折叠逻辑。
但别忘了补 flex-direction: column（如果子元素是竖排），否则默认横排会打乱原有结构；另外，如果子元素用了 position: absolute，它已脱离文档流，此时 margin-top 本就不参与折叠，下移另有原因（比如 top 偏移或父元素高度塌陷）。
真正起作用的永远是父元素是否设置了能阻断折叠的属性，而不是“让 margin 生效”。很多问题反复修不好，是因为只加了 overflow: hidden 却没确认父元素是不是块级（display: block）、有没有被 transform 干扰，或者样式优先级被重置库覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
