这是CSS外边距折叠现象：子元素margin-top因父元素缺乏padding、border或BFC触发属性而与父元素上边缘合并，导致父元素下移；可通过overflow:hidden、display:flow-root或padding-top等方案解决。
为什么 margin-top 会“跑到父元素头上”
这不是失效，是 CSS 垂直边距折叠（Margin Collapsing）在起作用：当父元素没有 padding、border、内容或触发 BFC 的属性，且子元素是第一个块级子元素时，子元素的 margin-top 会和父元素的上边缘“合并”，视觉上就像父元素被顶下去了。
overflow: hidden 为什么能解决这个问题
它让父元素创建一个新的块级格式上下文（BFC），而 BFC 内部的 margin 不会与外部元素折叠。只要父元素有了 BFC，子元素的 margin-top 就只作用于自身位置，不再“传染”给父容器。
- 兼容性好，IE6+ 都支持
overflow: hidden - 写法简单：
.parent { overflow: hidden; } - 副作用需留意：如果子元素本该溢出（比如下拉菜单、阴影、绝对定位偏移），会被裁剪
- 若只是防折叠，
overflow: auto或overflow: clip（现代浏览器）也可替代，但语义更弱
其他常见写法对比：什么时候不该用 overflow: hidden
如果你的父容器本就依赖内容溢出（如滚动区域、气泡箭头伸出、过渡动画越界），硬加 overflow: hidden 会掩盖真实问题。
-
display: flow-root：专为触发 BFC 设计，无裁剪副作用，推荐用于现代项目 -
padding-top: 1px：最小代价阻断折叠，几乎零风险，适合快速修复 -
border-top: 1px solid transparent：同样有效，但可能干扰 border-box 计算或伪元素定位 -
position: relative：也能触发 BFC，但会改变层叠上下文，慎用于已有 z-index 逻辑的组件
容易被忽略的关键点
仅靠给子元素加 margin-top 是不够的；必须从父元素“设防”。哪怕你写了 margin-top: 20px，只要父元素没脱离边距折叠规则，它就不是子元素的位移，而是父子共同的位移。真正生效的永远是父子之间的边界定义方式，而不是单方面声明。
立即学习“前端免费学习笔记（深入）”；
