在组件化开发中，原则上不该用 float。因其会让元素脱离文档流，导致父容器塌陷、兄弟元素错位，且clearfix无法解决跨组件浮动污染，应优先使用display: flow-root、flexbox或grid替代。
浮动本身就会污染全局布局，不是组件问题而是机制缺陷
浮动（float）会让元素脱离文档流，直接导致父容器高度塌陷、后续兄弟元素错位——这种影响不依赖类名，也不看是否在“组件”里，只要用了 float，就天然具备跨组件破坏力。它不像 .btn 那样靠命名冲突才出问题，而是靠 DOM 流失直接搞乱整个页面布局。
所以别想着“怎么安全地在组件里用浮动”，正确思路是：**在组件化开发中，原则上不该用 float**。现代布局方案已完全可替代它，继续用就是给自己埋雷。
为什么 clearfix 不能解决组件级浮动污染
clearfix 是为修复父容器塌陷而生的补丁，但它只作用于“当前父级”，对组件外的布局无约束力。一旦组件被插入到一个已有浮动上下文的宿主页面（比如宿主用了 float: left 布局侧边栏），你的 clearfix 就完全失效——子组件浮动仍会干扰宿主的 float 流程。
- 伪元素
::after { clear: both }只清当前父块，不清外部浮动环境 - 设置
overflow: hidden会触发 BFC，但可能意外裁剪position: absolute子元素或阴影 - 所有 clearfix 方案都假设“浮动只发生在本组件内”，而第三方嵌入场景下这个假设不成立
替代方案：用 display: flow-root 或 Flexbox 替代 float
display: flow-root 是最轻量的替代：它创建新的 BFC，能包裹内部浮动（如果非得保留旧代码），且不会像 overflow: hidden 那样裁剪内容。但更推荐直接重构为现代布局：
- 横向排列用
display: flex+flex-direction: row，天然不脱离文档流 - 文字环绕图片等少数场景，改用
shape-outside+float组合（仅限该场景，且需测试兼容性） - 响应式多列布局用
display: grid，列宽、间距、顺序全部可控，无浮动副作用
注意：flow-root 在 IE 中不支持，若需兼容 IE，可用 display: flex 作为降级（哪怕只有一项子元素）。
如果必须保留浮动，至少隔离它的传播路径
极少数 legacy 场景（如老 CMS 插件集成）无法立刻移除 float，此时要阻断它对外部的影响：
- 组件根节点强制设
display: flow-root或display: flex，切断浮动外溢 - 禁止组件样式中出现
clear: both以外的clear值（如clear: left），避免干扰宿主已有浮动流 - 避免在组件 CSS 中写全局浮动重置（如
* { float: none !important }），这会破坏宿主页面 - 用 Chrome DevTools 的 “Layout Shift Regions” 面板检查浮动是否引发意外交互（如滚动抖动、焦点跳变）
真正难处理的从来不是“怎么清浮动”，而是“谁在父级或兄弟级也用了 float 却没告诉你”。组件越独立，越要默认自己运行在一个未知浮动环境中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
