display: flow-root 是最轻量的修复方式，通过创建 bfc 阻断父子 margin 合并，使子元素 margin-top 不再穿透父容器；但仅作用于该父级，兄弟元素间仍需用 gap 或单向 margin 解决垂直合并。
margin-top让父容器整体下移是怎么回事
这不是 bug，是 CSS 规范明确定义的行为：当父元素没有 border、没有 padding、overflow 是默认的 visible，且第一个子元素设置了 margin-top 时，子元素的上外边距会“穿透”父容器，变成父容器对外的外边距。视觉上就是整块内容被顶上去一截。
常见于移动端——视口窄、内容紧凑、开发者习惯用 margin-top 控制首屏间距，叠加后位移更明显。用 position: relative 或 transform 挡不住，它们不创建 BFC，无法阻断这个合并条件链。
display: flow-root 是最轻量的修复方式
给父容器加 display: flow-root，能显式创建 BFC，把父容器和子元素隔开，让子元素的 margin-top 只作用于内部，不再向上合并。
- 副作用极小：不影响布局流、不改变盒模型、不干扰滚动锚点（相比
overflow: hidden） - 兼容性注意：IE 不支持，旧版 Safari（≤15.4）需 fallback
- 别加错位置：必须加在“参与合并”的那个父元素自身上，给子元素套 wrapper 再设
flow-root无效
兄弟元素间 margin-bottom 和 margin-top 同时设会白忙活
两个相邻块级元素，一个设 margin-bottom: 20px，另一个设 margin-top: 30px，实际间距只有 30px，不是 50px。这是垂直 margin 合并的必然结果，不是计算失误。
真正可控的做法是统一用单向 margin：
- 所有兄弟元素只设
margin-bottom，末项用:last-child { margin-bottom: 0 } - 或改用
gap：Flex 容器设display: flex; flex-direction: column; gap: 20px，Grid 同理 - 避免在列表、卡片组、表单项中同时写上下 margin，尤其动态插入子项时（如评论流），
gap更稳定
BFC 是局部屏障，不是全局开关
给父容器加了 display: flow-root，只解决它和第一个子元素之间的父子重叠；它的子元素之间若仍是块级、相邻、无隔离，照样会发生兄弟重叠——得逐层判断。
嵌套深、子项动态增删的组件（比如折叠面板、无限滚动列表），硬加一层 flow-root 往往治标不治本。这时候优先重构为 Flex/Grid，用 gap 管理间距，从源头绕过重叠机制。
真正容易被忽略的是：重叠只发生在普通流中的块级元素垂直方向。一旦用了 display: flex 或 display: grid，子元素就自动脱离重叠规则——这不是“修复”，而是换了一套不触发它的布局体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
