CSS浮动元素会脱离文档流，因其本质是图文环绕排版指令而非布局工具，导致父容器高度塌陷、兄弟元素重叠及外部布局污染；须用display: flow-root等触发BFC从封装边界切断外溢。
浮动（float）是已废弃但仍未完全消失的布局机制，它会脱离文档流、影响兄弟/父级元素高度，且其影响会穿透到宿主页面——这是第三方 CSS 组件封装中最隐蔽的污染源之一。仅靠重置 float 或加 clear 不够，关键在于**从封装边界上切断浮动的外溢能力**。
为什么 float 会逃出组件边界？
因为 float 不受普通 CSS 作用域（如 BEM 类名、CSS Modules）限制：只要父容器没形成新的块级格式化上下文（BFC），浮动子元素就会“抬升”并干扰外部排版。即使你用了 .my-card__content 这类高特异性类名，也无法阻止它内部的 float: left 拉偏宿主页面的 h2 或侧边栏。
- 常见错误现象：
float元素导致宿主页面后续段落塌陷、导航栏错位、CMS 编辑器预览区滚动异常 - 根本原因：浮动污染不依赖选择器匹配，而是 DOM 流式布局的物理效应
- Shadow DOM 能解决，但前提是 shadow root 的根节点自身也触发了 BFC —— 否则浮动仍可能影响 shadow host 元素的尺寸
在 Shadow DOM 中必须显式创建 BFC
Shadow DOM 隔离了样式，但不自动隔离布局流。若组件内部用 float 布局，而 shadow root 容器（即 :host）未形成 BFC，浮动仍会让 host 元素高度坍缩，进而影响外部布局。
- 必须在
:host上设置至少一项 BFC 触发条件：overflow: hidden、display: flow-root、contain: layout - 推荐用
display: flow-root—— 语义清晰、无副作用（比overflow: hidden更安全） - 示例：
:host { display: flow-root; } - 若需兼容旧浏览器（如 Safari overflow: auto 并确保不截断内容
不用 Shadow DOM 时，float 必须被替代或围堵
在 IE11 兼容场景或 CMS 纯 HTML 插入场景中，无法依赖 Shadow DOM，此时必须主动消除 float 的布局穿透性。
立即学习“前端免费学习笔记（深入）”；
- 首选方案：用
display: flex或display: grid替代所有浮动布局 —— 它们天然不脱离文档流 - 次选围堵方案：在组件最外层容器加
overflow: hidden（注意：IE6–8 需配合zoom: 1） - 禁止在组件内使用
clear: both作为“修复”，它只解决局部，不阻断浮动对外部的影响 - 若必须保留
float（如 Legacy Foundation 代码），务必包裹一层div并设display: flow-root，且该 wrapper 必须是组件 HTML 的最外层节点
构建工具链中如何预防 float 残留？
即使团队约定不用 float，第三方 CSS（如 Bootstrap 3.x、旧版 Font Awesome）仍可能引入。自动化拦截比人工审查更可靠。
- PostCSS 插件
postcss-no-unsupported可配置禁用float，构建时报错 - Stylelint 规则
no-invalid-position-at-import-rule不适用，但可自定义规则检查float出现位置 - Webpack/CSS Loader 中启用
exportOnlyLocals: true对 CSS Modules 无效，因float是声明而非类名 - 真正有效的预防：在 CI 流程中用 Puppeteer 加载组件 demo 页面，执行
getComputedStyle(el).float !== 'none'断言
浮动污染最难调试，因为它不报错、不警告，只在特定宿主页面组合下悄悄错位。最稳妥的做法不是“修 float”，而是从封装起点就拒绝它进入组件作用域——无论用 flow-root 围堵，还是用现代布局替代，本质都是在边界上立一道物理墙，而不是和 CSS 特异性打游击战。
