display: flow-root 是最干净的解法，它专为创建无副作用bfc设计，不裁剪内容、不触发滚动、不改变盒模型，现代浏览器已全面支持。
直接结论：在父元素上设置 display: flow-root 是最干净、副作用最小的解法，能同时解决父子重叠和兄弟重叠问题。
为什么 display: flow-root 是首选
它专为创建无副作用 BFC 而设计，不裁剪内容、不触发滚动条、不改变盒模型尺寸、不影响 position: absolute 子元素或 box-shadow 溢出。现代浏览器（Chrome 58+ / Firefox 55+ / Safari 15.4+ / Edge 79+）已全面支持。
对比其他方式：
-
overflow: hidden会意外截断下拉菜单、tooltip、阴影等溢出内容 -
float: left或position: absolute让元素脱离文档流，破坏父容器高度计算 -
padding-top: 1px虽兼容性好，但多占空间；0.1px在某些缩放场景下可能失效
父子 margin 重叠怎么破
典型现象：父容器没 border/padding/内容，子元素设了 margin-top: 24px，结果整个父容器被“顶上去”，顶部空白消失——这不是样式没生效，是父子 margin 合并了。
关键点：BFC 必须由参与合并的父元素自身触发，改子元素无效。
推荐写法：
.parent {
display: flow-root;
}
.child {
margin-top: 24px;
}
验证技巧：临时加 border: 1px solid transparent 到父元素，塌陷立刻消失，可快速定位是否为此类问题。
兄弟元素间距为啥不是 margin 之和
两个垂直排列的 <div>，一个设 <code>margin-bottom: 20px，另一个设 margin-top: 30px，实际间距只有 30px——这是规范行为（取较大值），不是计算错误。
解决方法不是给每个兄弟加 overflow: hidden（它们仍在同一父 BFC 内，无效），而是让其中一个脱离原 BFC：
- 用
<div style="display: flow-root"> 包住第二个 <code><div> <li>或统一约定只设 <code>margin-bottom，再用:last-child { margin-bottom: 0; }清末尾 - 若已是 Flex/Grid 布局，优先用
gap替代 margin，彻底绕开 collapse
容易被忽略的细节
BFC 是局部屏障，不是全局开关。父元素设了 display: flow-root，只能阻断它和外部的 margin 交互；它的子元素之间仍可能重叠，除非它们自己也触发新 BFC 或加隔离层。
另外，flow-root 在 IE 中完全不支持，如需兼容老环境，fallback 方案应是 overflow: hidden + 显式检查子元素是否含溢出内容，而不是盲目替换。
