子元素的 margin-top 会让父容器“一起下移”是因外边距合并：当父容器无 border/padding/内容分隔时，其内容顶边与子元素 margin-top 合并取较大值，导致父容器被下推；display: flow-root 可创建无副作用 bfc 阻断该行为。
为什么子元素的 margin-top 会让父容器“一起下移”
这不是样式失效，而是 CSS 规范明确定义的行为：当父容器是普通块级盒、且没有 border、padding、overflow 非 visible 值、也没有内容分隔时，它的内容区顶边会和第一个子元素的 margin-top 直接接触，两者合并取较大值，并作用在父容器边界上——结果就是整个父容器被往下推，顶部空白消失。
常见误判是“CSS 没生效”，实际是 margin 穿透了。这种穿透只发生在 normal flow 中，display: flex 或 display: grid 容器内不会触发。
用 display: flow-root 阻断父子坍塌最稳妥
display: flow-root 是专为解决这类问题设计的现代方案，它创建一个无副作用的 BFC（块格式化上下文），不裁剪内容、不改变盒模型尺寸、不影响子元素定位或溢出行为。
- 必须加在**父容器自身**上，不是子元素或兄弟元素
- 兼容性已足够：Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+
- 不要和
overflow: hidden混用——后者可能意外裁剪position: absolute子元素或下拉菜单 - 示例：
.card-list { display: flow-root; }<br>.card { margin-top: 24px; }
老项目兼容 fallback：用 padding-top: 0.1px 或 border-top
只要父容器有哪怕 0.1px 的 padding-top，就足以打断坍塌条件链（规范要求“中间无 border/padding/内容隔开”）。这个值视觉不可见，也不影响布局尺寸，比 border-top: 1px solid transparent 更轻量。
适用场景：
- 组件库封装时不能改子元素
margin，只能动父容器 - 需要保留原有
margin语义（比如设计系统规定统一用margin控制间距） - 需支持 IE 或旧版 Safari（
flow-root不支持）
别踩这些坑
有些看似能“解决”的操作，其实埋了新问题：
-
float: left或position: absolute虽然能触发 BFC，但会让元素脱离文档流，导致后续布局错乱 - 给子元素加 wrapper 再设
display: flow-root—— 无效，BFC 必须由“参与合并”的那个父元素自身触发 - 用
:last-child { margin-bottom: 0 }清除来“模拟” padding 效果——只是绕开问题，没打断坍塌条件 - 对空父容器依赖
margin-top控制位置——优先改用padding-top或gap
真正难调的是嵌套深、动态插入子项的组件（比如评论列表、折叠面板），这时硬加 flow-root 可能治标不治本；统一用 gap 或重构为 flex/grid 才是根治思路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
