display: flow-root是唯一推荐的解法，它专为隔离浮动上下文设计，不裁剪、不滚动、不干扰定位，且能同时解决塌陷与margin合并问题；overflow:hidden虽能触发BFC但会裁剪绝对定位元素、不隔离margin合并、在微前端中易导致弹层消失。
display: flow-root 是唯一推荐的解法，它专为隔离浮动上下文设计，不裁剪、不滚动、不干扰定位，且能同时解决塌陷与 margin 合并问题。
为什么不能用 overflow: hidden 清浮动来隔离模块样式
overflow: hidden 确实能触发 BFC，但它在 CSS Modules 场景下极易引发隐蔽问题：
• box-shadow、position: absolute 的 tooltip 或下拉菜单会被意外裁剪，而这类元素常由组件内部动态生成，调试时很难联想到是父容器的 overflow 导致；
• 在微前端或组件库封装中，若某个按钮组件用了 overflow: hidden，外部集成的日期选择器弹层可能直接消失；
• 它对子元素间的 margin 合并不起隔离作用——你“清”了浮动，但父子/兄弟间仍会合并外边距，导致模块化布局错位；
• 旧版 Safari 配合 transform 可能出现闪烁，而这类组合在动画类组件中很常见。
display: flow-root 必须加在哪个位置才生效
必须加在「直接包裹浮动子元素的那个父容器」上，且该容器需为块级（非 inline）：
• 写在祖父层（如 layout wrapper）或兄弟容器上，完全无效；
• 给浮动元素自身加 display: flow-root 没意义——它已脱离文档流，BFC 对它不起作用；
• 若父容器是 inline 元素（比如 <span>），需先设 display: block 或 display: inline-block，再加 display: flow-root；
• Flex/Grid 容器本身已是独立格式化上下文，此时再加 flow-root 无效果，也不必要。
CSS Modules 中使用 flow-root 的边界注意事项
即使启用了 CSS Modules，display: flow-root 的作用范围仍是局部的：
• 它只隔离该容器内部的浮动和 margin 合并，不影响它与外部兄弟容器之间的层叠或外边距关系；
• 若模块内嵌套多层浮动结构（如卡片 → 列表项 → 浮动图标），需逐层检查是否每个浮动子树的**直接父容器**都加了 flow-root；
• flow-root 会重置父容器与第一个/最后一个子元素之间的外边距合并行为——这不是 bug，而是标准表现，但容易被忽略，导致模块与其他组件拼接时出现意外间距；
• 在 SSR 或服务端渲染场景中，确保构建工具（如 webpack css-loader）未将 flow-root 规则误删或提取到全局样式中。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：BFC 隔离不等于“全局免疫”。一个模块加了 flow-root，只说明它内部稳了；但它的容器若仍处于上级 BFC 的默认层叠层级里，就可能被其他未隔离的组件遮挡或挤压——这时候得结合 isolation: isolate 和 z-index 协同处理，而不是只盯着浮动本身。
