display: flow-root 是最干净的解法，现代浏览器支持良好；兼容 ie 需降级为 padding-top: 0.1px 或 overflow: hidden（后者有裁剪风险），其本质是解决 margin collapse 导致的父元素下移与高度塌陷问题。
display: flow-root 是目前最干净、副作用最小的解法，现代项目可直接用；若需兼容 IE，则降级为 padding-top: 0.1px 或 overflow: hidden（但后者有裁剪风险）。
为什么子元素的 margin-top 会让父元素“下移”
这不是 bug，是 CSS 规范定义的 margin collapse 行为：当父元素处于标准流、未形成 BFC、且顶部无 border/padding/inline 内容时，它的内容区顶边会与子元素的 margin-top 直接接触，两者合并取较大值，并作用于父容器外边界。
常见错误现象包括：
- 给
.child { margin-top: 40px }，结果整个.parent相对于文档下移 40px，子元素仍紧贴父顶部 - 父容器
height: auto时高度塌陷，像“消失了一截” - 调试时反复检查子元素 margin 是否生效，却忽略父容器是否已处于某个 BFC 内
display: flow-root 是首选，但要注意兼容性边界
它专为创建无副作用 BFC 设计，不裁剪 position: absolute 子元素，不干扰 overflow 原意，也不改变盒尺寸。
实操要点：
- 只需在父元素上加一行：
.parent { display: flow-root; } - Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均支持；IE 完全不支持
- 如需兼容 IE，可用
@supports降级：@supports not (display: flow-root) { .parent { overflow: hidden; } } - 避免和
float或position: absolute混用——这些本身已脱离普通流，flow-root在这种上下文中无效
替代方案：用 padding-top: 0.1px 打断塌陷链
只要父元素顶部存在哪怕 0.1px 的 padding，就破坏了 margin collapse 的触发条件（规范要求“中间无 border/padding/content”）。
这个值视觉不可见、不影响布局精度、全浏览器兼容，特别适合：
- 组件库封装（不能改子元素 margin，只能动父容器）
- 设计系统强制统一用 margin 控制间距的场景
- 需零副作用又得兼容 IE 的遗留项目
注意别写成 padding-top: 1px——高缩放或高 DPI 下可能被肉眼察觉，0.1px 更稳妥。
慎用 overflow: hidden 的真实代价
它确实能触发 BFC 解决塌陷，但副作用比你看到的更隐蔽：
- 意外裁剪
position: absolute子元素（如下拉菜单、Tooltip） - 截断
box-shadow或圆角溢出部分 - 在页面缩放或高 DPI 屏幕下，可能无故出现滚动条（尤其搭配
transform时） - 如果父容器本就设了
overflow: auto，再加hidden不仅多余，还可能覆盖原有滚动逻辑
真正容易被忽略的是：父子 margin 塌陷很少单独发生。它常和父容器 height: auto 下的高度塌陷、子元素浮动未清除、或嵌套多层未设隔离共同作用。调试时别只盯着那个 margin-top，要顺着盒模型往上查——父元素有没有 border？padding？是否已处于某个 BFC 内？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
