浮动元素脱离文档流导致父容器高度塌陷和后续元素定位错乱，组件样式隔离（如scoped、css modules）仅解决类名冲突，无法阻止该布局行为，必须由容器主动触发bfc（如display:flow-root）兜底。
浮动本身不“污染”，但脱离文档流后影响父容器高度和后续元素定位，而组件样式隔离机制（scoped、CSS Modules）对浮动行为完全无感——它只管类名和选择器，不管布局模型。
浮动脱离文档流，scoped 根本拦不住
scoped 的作用是给元素加 data-v-xxx 属性、重写选择器，但它不改变 CSS 的渲染规则。只要写了 float: left，元素就立刻脱离普通流，父组件的 div 会塌陷，兄弟组件的元素就会“飘”上来占位——这个过程发生在浏览器渲染层，Vue 编译阶段早已结束。
- 现象：
<mycard></mycard>里有个float: right的按钮，结果卡片下方的<footer></footer>跑到右侧去了 - 原因：MyCard 的根元素没触发 BFC，高度为 0；
scoped生成的.btn[data-v-abc]{float:right}依然生效，但隔离不了布局副作用 - 关键点：
scoped防的是“类名冲突”，不是“流式破坏”
React 中 CSS Modules 同样失效
CSS Modules 把 .sidebar 编译成 _1a2b-sidebar，但只要这个哈希类对应的选择器里含 float，它照样脱离文档流。模块化只解决命名问题，不接管 display、position、float 这些布局属性的语义。
- 常见误操作：在
Button.module.css里写.root { float: left; margin-right: 8px; }，然后多个 Button 并排用，结果整个页面布局错乱 - 更隐蔽的问题：用
styled-components写const FloatBox = styled.div`float: left; width: 200px;`，组件复用时父容器未清理高度，后续内容全部上浮 - 注意：CSS-in-JS 生成的 style 标签插入
，也是全局生效，不受组件边界约束
嵌套浮动 + 组件拆分 = 错乱放大器
当浮动出现在子组件内部，而父组件又用了 scoped 或 CSS Modules，问题会逐层传导：子组件浮动 → 子组件根节点塌陷 → 父组件无法感知高度 → 父组件自身也塌陷 → 外部其他组件位置偏移。
- 典型场景：一个
<sidebar></sidebar>组件内含多个<navgroup></navgroup>，每个都用float: left布局；但Sidebar没设display: flow-root，最终整块侧边栏“消失”在页面顶部 - 调试技巧：在开发者工具中选中父容器，看
Computed > height是否为0；临时加outline: 1px solid red查实际占位 - 不要指望靠
:deep()或::v-deep修复——它们只改选择器作用域，不恢复文档流
真正要防的不是“浮动写在哪”，而是“谁来收口”。每个可能含浮动的容器，都得自己触发 BFC（比如 display: flow-root），不能依赖组件隔离机制代劳。这点在微前端或跨团队协作时尤其致命——别人写的组件你没法改浮动逻辑，只能靠容器兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
