浮动导致父容器塌陷是css文档流脱离与scoped属性哈希共同作用的结果；可靠清除方式为.clearfix::after{content:"";display:block;clear:both}，或现代方案display:flow-root。
Vue单文件组件中浮动元素导致父容器塌陷
在 .vue 文件的 <style scoped></style> 下写 float: left，子元素一浮，父容器高度就归零——这不是 Vue 特有的 bug，而是 CSS 作用域隔离 + 浮动脱离文档流共同导致的典型现象。scoped 会为选择器自动添加属性哈希（如 .box[data-v-f3f2a1b4]），但伪元素 ::after 的插入和 clear 行为不受影响，关键在于「谁来触发包含」。
scoped 下仍可用 ::after 清除浮动，但必须加 display: block
很多人复制网上 .clearfix::after 代码后失效，是因为漏掉了 display: block 或用了 display: table 却没配 content。在 scoped 环境中，以下写法是可靠且无副作用的：
.clearfix::after {
content: "";
display: block;
clear: both;
}
-
content: ""必须存在，否则伪元素不渲染 -
display: block是关键：只有块级元素才能响应clear；display: table虽然也能触发 BFC，但在部分老版 Safari 或 Vue 2 的 scoped 编译下可能被忽略 - 不要写
height: 0; overflow: hidden这类冗余声明——它们对清除无效，还可能干扰子元素溢出逻辑
避免用 overflow: hidden 在 scoped 组件里“偷懒”
给父容器加 overflow: hidden 看似简单，但在 Vue scoped 场景下容易踩坑：
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 如果子组件内部有
position: absolute元素超出父边界（比如下拉菜单、Tooltip），会被直接裁剪 -
overflow: auto可能意外触发滚动条，尤其在移动端 Webview 中表现不稳定 - Vue 3 的
<style scoped></style>对overflow属性无特殊处理，但它改变的是布局上下文（BFC），而 BFC 的触发条件在 scoped 下依然生效——问题不在是否生效，而在副作用不可控
现代替代方案：用 display: flow-root 替代伪元素
如果你的项目最低支持 Chrome 64+/Firefox 58+/Safari 15.4+（即基本覆盖 Vue 3 主流运行环境），直接用：
.container {
display: flow-root;
}
它比 ::after 更干净：
- 不依赖伪元素，不增加渲染节点
- 不需要额外 class 名，语义即行为
- 在 scoped 下完全正常，CSS 属性不会被哈希污染
- 它原生创建 BFC，且不会像 overflow 那样附带裁剪或滚动副作用
注意：IE 和旧版 Edge 完全不支持，Vue 2 项目若需兼容 IE11，请坚持用 ::after 方案。
真正容易被忽略的点是：清除浮动不是为了“让父容器有高度”，而是为了让后续兄弟元素不误入浮动区域。哪怕你用 flow-root 解决了塌陷，如果下一个兄弟元素本身也设了 float，它仍可能贴着上一个浮动块右边缘跑——这时候得看整体布局逻辑，而不是只盯一个父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
