应保留图文环绕等语义准确的float，重点重构用于多栏布局的float；用display: flow-root替代overflow: hidden清除浮动；改flex时注意flex-shrink、gap和对齐问题；必须保留float时统一box-sizing并清理html空白。
先判断哪些float真需要动，哪些可以留着
不是所有float都该被干掉。重构前花两分钟扫一遍CSS：如果只是img { float: left; margin-right: 1em; }这种图文环绕场景，它语义准确、浏览器支持稳如老狗，别碰——改了反而容易出文字截断或换行错位；但凡看到.sidebar { float: left; width: 200px; } + .main { float: right; width: calc(100% - 200px); }这类用来撑多栏布局的，就是重构重点。
关键检查点：
- 父容器是否设置了overflow: hidden或zoom: 1？这些是典型“临时止血”写法，说明浮动已引发塌陷
- 是否存在margin-left配float: right这种靠猜宽度硬挤位置的写法？这种必换，缩放或字体加载稍有延迟就错位
- HTML里有没有一堆<div class="clear"></div>？这是清除浮动失控的明确信号
用display: flow-root批量替换overflow:hidden
老代码里满屏overflow: hidden清浮动，看着像解药，实则埋雷：可能裁掉box-shadow、遮住下拉菜单、让getBoundingClientRect()返回错误尺寸。现代浏览器（Chrome 64+ / Firefox 58+）直接把父容器的overflow: hidden换成display: flow-root就行，效果一样——触发BFC包裹浮动子项，但完全不干预溢出行为。
操作建议：
- 全局搜索overflow:\s*hidden;（注意空格），排除那些真需要裁剪的场景（比如轮播图容器）
- 替换为display: flow-root;，然后立刻在浏览器里拖拽窗口看阴影/弹层是否还正常显示
- IE11用户还在？加个@supports not (display: flow-root) { ... }回退到伪元素法
把float:left/right替换成flex布局时的坑
把.nav-item { float: left; }改成.nav { display: flex; }看似一步到位，但实际常翻车：
- float默认不占满父容器，flex子项默认flex-shrink: 1，小屏幕下文字可能被压缩甚至换行 → 加flex-shrink: 0或设min-width
- 原来靠margin-right分隔的浮动项，换成flex后要改用gap（现代）或margin-right配合:last-child { margin-right: 0; }（兼容）
- 如果原结构是“左固定宽 + 右自适应”，别写flex: 0 0 200px + flex: 1，直接用flex: none和flex: auto更稳妥
- 注意vertical-align在float里生效，在flex里失效——如果原来靠它对齐图标，得改用align-items: center
保留float但修复常见错位细节
有些场景必须留float（比如CMS输出的旧模板），那就专注修细节：
- 所有浮动容器统一加* { box-sizing: border-box; }，否则padding会让width: 33.333%超限换行
- 浮动元素之间有换行符？HTML里把<div class="col">...</div>
<div class="col">...</div>写成一行，或给父容器加font-size: 0再单独设子元素字号
- 清除浮动后右侧仍有空白？Inspect看是不是父容器padding或line-height撑出来的，不是浮动问题本身
- IE残留的zoom: 1全部删掉，现代项目里它既没用又干扰计算
真正难的不是怎么换技术，而是判断哪一行float背后连着业务逻辑——比如某个float: right按钮的位置被JS脚本精确测量过，一动就导致弹窗定位偏移。重构前先跑一遍E2E测试，比盯着CSS猜风险靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
