display: flow-root 是最安全解法，专为隔离浮动与 margin 塌陷设计，不裁剪内容、不干扰定位；overflow: hidden 虽能触发 BFC，但会裁剪绝对定位元素、不隔离 margin 合并、旧版 Safari 中配合 transform 易闪烁。
display: flow-root 是当前最干净、副作用最小的解决方案，但必须作用在“参与重叠”的父容器上，而不是浮动元素自身或任意外层。
为什么 overflow: hidden 不是好选择
它确实能触发 BFC 并阻止 margin collapse，但会带来实际布局风险：
-
overflow: hidden会裁剪所有溢出内容：比如box-shadow、position: absolute的下拉菜单、tooltip 全部被截断 - 旧版 Safari 中配合
transform可能出现闪烁 - 最关键的是：它虽清除了浮动，却让非浮动子元素仍处于同一 BFC 内——它们之间的垂直
margin依然会合并
display: flow-root 的正确用法
这是专为解决这类问题设计的现代属性（Chrome 64+/Firefox 58+/Safari 15.4+），语义明确且无副作用：
- 必须加在“参与 margin 合并”的容器上，例如父子重叠时加在父元素，兄弟重叠时加在共同父容器
- 不要给浮动元素自己加
display: flow-root——它已脱离 normal flow，加了也无效 - 如果父容器已经是
display: flex或display: grid，再加flow-root无效，因为 Flex/Grid 本身已是独立格式化上下文 - 示例：
.wrapper { display: flow-root; }→ 包裹多个<p></p>或<div> 后，它们之间不再发生垂直 margin 合并 <h3>BFC 隔离是局部的，别指望一层搞定全部</h3> <p>一个容器设了 <code>display: flow-root，只隔离它内部与外部的 margin 合并，不改变它和它兄弟容器之间的关系：立即学习“前端免费学习笔记（深入）”；
- 如果
.section-a和.section-b是同级块，且都未创建 BFC，它们各自的margin-bottom和margin-top仍可能合并 - 复杂嵌套中，得逐层检查哪些容器真正处在 margin 合并链上——比如父容器无
border、无padding、无内容分隔，又没触发 BFC，才需要干预 - 最易被忽略的点：空元素自身的
margin-top和margin-bottom也会折叠，这种场景加flow-root没用，得换思路（比如改用padding或伪元素占位）
- 如果
