移动端布局位移由父子 margin-top 重叠引发，是 css 规范行为而非 bug；解决关键是用 display: flow-root 创建 bfc 阻断合并，而非删除 margin。
移动端布局位移常由父子元素 margin-top 重叠直接引发——子元素的上外边距“穿透”父容器，把整块内容顶上去，不是 bug，是规范行为；解决关键不是删 margin，而是阻断重叠条件链。
为什么 margin-top 会让父容器整体下移？
父容器没 border、没 padding、overflow 是默认 visible，且第一个子元素设了 margin-top，三者同时满足时，父子 margin 就会合并。浏览器按规范把子元素的 margin-top “吸走”，变成父容器对外的外边距，视觉上就是整个区块往下跳了一截。
- 这不是渲染错误，是所有现代浏览器一致执行的 CSS 规范
- 移动端尤其明显：视口窄、内容易挤、开发者更倾向用
margin控制间距，叠加后位移更突兀 -
position: relative或transform无法修复——它们不打断 BFC 条件
首选方案：display: flow-root 打断父子重叠
给父容器加 display: flow-root，是最轻量、副作用最小的解法。它显式创建 BFC，把父容器和子元素隔开，让子元素的 margin-top 只作用于内部，不再向上合并。
- 兼容性足够：Chrome 58+、Firefox 55+、Safari 15.4+、Edge 79+，IE 不在考虑范围内
- 不裁剪内容：不像
overflow: hidden，box-shadow、position: absolute下拉菜单、tooltip 全部正常显示 - 不改变尺寸：不引入 border/padding，也不影响
box-sizing计算逻辑 - 写法极简：
.section { display: flow-root; }，一行生效
兄弟元素间距不准？别只靠 margin-bottom + margin-top
两个相邻 div 分别设 margin-bottom: 20px 和 margin-top: 30px，实际间距只有 30px ——这是垂直 margin 合并的必然结果，不是计算失误。
- 统一约定只设单向 margin：比如全部用
margin-bottom，再配合:last-child { margin-bottom: 0; } - 或改用
gap：父容器设display: flex; flex-direction: column; gap: 20px;，gap不参与重叠，语义更清晰 - 避免给每个兄弟元素单独加
overflow: hidden：它们仍在同一父级 BFC 内，重叠照旧发生 - 慎用
padding-top隔离：虽有效（哪怕padding-top: 1px），但会增加父容器高度，在滚动锚点、视口计算中可能引发新偏差
真正容易被忽略的是：BFC 是局部屏障，不是全局开关。给父容器加了 display: flow-root，只解决它和子元素之间的父子重叠；它的子元素之间若仍为块级、相邻、无隔离，照样会兄弟重叠——得逐层判断，不能加一层就以为万事大吉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
