子元素margin-top导致父元素“下移”是CSS规范定义的margin collapse行为，非bug；需父元素无border/padding/content、未形成BFC、父子同在标准流中三条件共存；首选display:flow-root创建无副作用BFC解决。
这是 CSS 规范定义的 margin collapse 行为，不是 bug，也不是渲染错误——只要父元素没形成 BFC、顶部又没 border/padding/内容分隔，子元素的 margin-top 就会“穿透”到父元素外部，与父元素自身的上外边距合并（取较大值），导致父容器整体下移。
触发塌陷的三个硬性条件
缺一不可：
- 父子都在标准文档流中（不能是
float、position: absolute或已处于某个 BFC 内） - 父元素未触发 BFC（即没有
display: flow-root、overflow: hidden等） - 父元素内容区顶边与子元素
margin-top直接接触（中间无border、padding、inline 文本等）
为什么 overflow: hidden 能解决但不推荐滥用
它确实通过触发 BFC 隔离了内外 margin，但副作用真实且隐蔽：
-
overflow: hidden会裁剪所有超出父容器的内容：下拉菜单、Tooltip、box-shadow、transform位移后的部分都可能被截断 - 在高 DPI 屏幕或页面缩放时，
overflow: auto可能无故出现滚动条 - 若父容器本就依赖
overflow: visible（比如卡片投影、模态框动画），加这个属性等于用新约束掩盖旧问题
display: flow-root 是目前最干净的解法
它是专为这类场景设计的 display 值，语义明确、行为可预测：
- 只加在父元素上：
.parent { display: flow-root; } - 创建 BFC，但不改变盒尺寸、不裁剪内容、不干扰
overflow原意 - 现代浏览器支持稳固（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）
- IE 完全不支持；需兼容时可用
@supports not (display: flow-root)降级
真正容易被忽略的点
margin 塌陷几乎从不单独发生。它常和父容器 height: auto 下的高度塌陷、子元素浮动未清除、或嵌套多层未设隔离共同作用。调试时别只盯着那个 margin-top，要顺着盒模型往上查——父元素有没有 border？有没有 padding？是否已处于某个 BFC 内？是否本身是 flex 或 grid 容器？这些都会影响塌陷链的成立与否。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
