父容器高度塌陷是float导致border不显示的直接原因，因浮动元素脱离文档流使父容器高度为0px；推荐用display: flow-root触发bfc修复，或回退overflow: hidden兼容旧浏览器。
Webpack打包后CSS浮动（float）本身不会丢失，真正出问题的往往是依赖浮动的布局逻辑被其他机制破坏——比如display: inline-block被压缩抹掉、clear失效、或更常见的是：浮动元素父容器未触发BFC导致高度塌陷，而这个塌陷在开发环境因热更新/样式注入未暴露，上线后才显现。
检查 float 元素父容器是否塌陷
这是最常被误认为“float 丢失”的真实原因。打包后HTML结构没变，但CSS顺序或压缩可能让父容器失去overflow: hidden、display: flow-root等BFC触发条件。
- 打开打包后的
dist/index.html，用浏览器开发者工具选中浮动元素的父级，看computed tab里height是否为0 - 若塌陷，确认该父容器是否还保有BFC触发属性。Webpack + CSS minifier（如
cssnano）可能把overflow: hidden !important简化为overflow: hidden，而某些旧版IE或安卓WebView对简写敏感 - 临时加
display: flow-root（现代方案）或overflow: auto（兼容方案）验证；若恢复，则问题不在float本身，而在BFC缺失
排查 CSS 压缩器移除了关键声明
optimize-css-assets-webpack-plugin或cssnano默认启用discardDuplicates和mergeLonghand，可能把看似冗余但实际影响布局的声明合并掉，例如多个float: left被合并，或float: none被误删。
- 临时禁用CSS压缩：在Webpack生产配置中注释掉
OptimizeCSSAssetsPlugin或设置cssnano的preset: ['default', { discardDuplicates: false, mergeLonghand: false }] - 对比打包前后CSS源码，搜索
float出现次数是否减少；特别注意float: none是否被批量清除——它常用于清除浮动，删除后会导致后续布局错乱 - 若确认是压缩所致，不要全局关压缩，而是给关键规则加
/* purgecss ignore */或/*! cssnano-disable */注释块
确认 sideEffects 配置没把 CSS 文件摇掉
当package.json中"sideEffects": false时，Webpack会把未被JS显式import的CSS文件当作无副作用代码直接剔除——哪怕你在HTML里手动<link>引入，只要没被JS引用，就可能不进打包产物。
- 运行
npm run build后，检查dist/目录下是否存在CSS文件；若完全缺失，90%是sideEffects惹的祸 - 把
"sideEffects"改为["*.css", "*.scss"]（按你实际用的扩展名调整），再构建 - 注意：Vite项目不用管这个，它不走Webpack的tree-shaking逻辑；但如果你用Vite +
vite-plugin-legacy并启用了polyfill注入，也要检查其includeAssets是否漏掉了CSS
真正难调试的不是float消失，而是它“看起来还在”——元素仍有float: left，但父容器塌陷、兄弟元素重叠、或者被后续display: flex规则覆盖。优先查computed styles和layout tab，比盯着source code更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
