子元素margin-top使父容器整体下移是CSS规范定义的父子外边距合并行为：父元素无border/padding/内容分隔、未形成BFC且子元素为首块级元素时，二者上外边距合并取大值，视觉上表现为父容器被下推；首选display:flow-root创建BFC阻断合并，须加在父容器自身。
直接加 display: flow-root 是最轻量、副作用最小的解法，但必须加在“参与重叠”的那个父容器上，不是所有地方都适用；兄弟元素间重叠则要换思路，靠单向 margin 或 gap 才真正可控。
为什么子元素 margin-top 会让父容器整体下移？
这不是 bug，是 CSS 规范明确定义的父子 margin 重叠行为：当父容器没有 border、没有 padding、overflow 是默认的 visible，且第一个子元素设置了 margin-top 时，这个上外边距会“穿透”父容器，变成父容器对外的上外边距。视觉上就是整块内容被顶上去一截。
常见于移动端首屏控制间距的场景——视口窄、内容紧凑，叠加后位移更明显。用 position: relative 或 transform 挡不住，它们不创建 BFC，无法阻断这个合并条件链。
- 触发三要素缺一不可：父子都在标准流中、父容器未形成 BFC、父容器顶部无任何分隔（
border/padding/非空内容） -
display: flow-root是专为此设计的现代方案，语义清晰，不裁剪、不干扰滚动锚点、不改变盒尺寸 - 别加错位置：必须加在“被穿透”的那个父元素自身上；给子元素套 wrapper 再设
flow-root无效
如何用 display: flow-root 快速修复父子重叠？
给父容器加 display: flow-root，能显式创建 BFC，把父容器和子元素隔开，让子元素的 margin-top 只作用于内部，不再向上合并。
立即学习“前端免费学习笔记（深入）”；
兼容性已足够好（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+），现代项目可直接用。老项目若需兼容 IE 或旧 Safari，可用 @supports 做 fallback：
.parent {
display: flow-root;
}
@supports not (display: flow-root) {
.parent {
overflow: hidden;
}
}
-
overflow: hidden虽兼容性好，但副作用隐蔽：可能意外裁剪position: absolute子元素（如下拉菜单）、截断box-shadow或圆角溢出 - 避免用
float或position: absolute，它们虽能触发 BFC，但会脱离文档流，引发新布局问题 - 透明边框
border: 1px solid transparent或极小padding-top: 0.1px也可打断，但前者增加 2px 总宽高，后者更稳妥且全兼容
兄弟元素间 margin-bottom 和 margin-top 同时设为什么白忙活？
两个相邻块级元素，一个设 margin-bottom: 20px，另一个设 margin-top: 30px，实际间距只有 30px，不是 50px。这是垂直 margin 合并的必然结果，不是计算失误。
真正可控的做法是统一用单向 margin，或改用现代布局机制：
- 所有兄弟元素只设
margin-bottom，末项用:last-child { margin-bottom: 0 } - Flex 容器设
display: flex; flex-direction: column; gap: 20px，Grid 同理 ——gap完全绕过重叠机制，且动态增删子项时稳定 - 避免在列表、卡片组、表单项中同时写上下 margin，尤其评论流这类动态插入场景，
gap更可靠
BFC 是局部屏障，不是全局开关
给父容器加了 display: flow-root，只解决它和第一个子元素之间的父子重叠；它的子元素之间若仍是块级、相邻、无隔离，照样会发生兄弟重叠——得逐层判断。
嵌套深、子项动态增删的组件（比如折叠面板、无限滚动列表），硬加一层 flow-root 往往治标不治本。这时候优先重构为 Flex/Grid，用 gap 管理间距，从源头绕过重叠机制。
真正容易被忽略的是：重叠只发生在普通流中的块级元素垂直方向。一旦用了 display: flex 或 display: grid，子元素就自动脱离重叠规则——这不是“修复”，而是换了一套不触发它的布局体系。
