直接写 float 必然导致父容器高度塌陷，可靠解法只有伪元素::after清除或display:flow-root；overflow:hidden虽能触发BFC但会裁剪绝对定位子元素，慎用；::after清除需content:""和display:block；flow-root是Vue3首选，IE不支持。
在 Vue 单文件组件的 下，直接写 float 必然导致父容器高度塌陷，这不是 bug，而是 CSS 作用域机制与浮动脱离文档流共同作用的必然结果；可靠解法只有两类：伪元素 ::after 清除（兼容性好）或 display: flow-root（现代、干净），其他“偷懒”方式大概率埋雷。
为什么 overflow: hidden 在
它确实能触发 BFC 并包裹浮动子项，但副作用极难控制：
- 任何
position: absolute子元素（比如下拉菜单、Tooltip、弹层）超出父边界时会被直接裁剪，且 scoped 不会改写该属性，问题照旧 -
overflow: auto在 iOS Webview 或某些 Android WebView 中可能意外触发滚动条，尤其内容动态加载时 - 它解决的是“包含”，不是“清除”——后续非浮动兄弟元素仍可能因文档流错位而布局异常
- Vue 3 的 scoped 编译不干扰
overflow，但 BFC 触发逻辑本身没变，问题根源不在哈希，而在布局副作用
::after 清除必须带 display: block 才生效
很多人复制网上的 .clearfix::after 代码后失效，核心就卡在这一步：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
content: ""必须存在，否则伪元素根本不渲染 -
display: block是关键：只有块级元素才能响应clear；display: table在部分老版 Safari 或 Vue 2 的 scoped 编译中可能被忽略 - 别加
height: 0、visibility: hidden或font-size: 0——这些对清除无贡献，反而可能干扰子元素内联格式化上下文 - Vue 2 项目需兼容 IE11？补一句
.clearfix { *zoom: 1; }即可，不用整个重写
display: flow-root 是 Vue 3 项目的首选方案
如果你的项目最低支持 Chrome 64+ / Firefox 58+ / Safari 15.4+（即覆盖绝大多数 Vue 3 运行环境），直接上这个：
-
.container { display: flow-root; }——无需额外 class、无需伪元素、不增加 DOM 节点 - scoped 下完全正常：
display是原生 CSS 属性，不会被哈希污染 - 它原生创建 BFC，且不像
overflow那样附带裁剪或滚动副作用 - 注意：IE 和旧 Edge 完全不支持，Vue 2 + IE11 场景请绕道，别硬套
真正容易被忽略的点是：清除浮动不是为了“让父容器有高度”，而是为了让父容器重新参与文档流计算——高度只是表象，后续元素的定位、margin 合并、层叠上下文才决定布局是否真正稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
