应优先用 display: flow-root 或 flex 替代 float，保留图文环绕类 float（如 img/figure），重构容器级浮动布局，用 flow-root 替换 overflow: hidden 清浮动，并注意 flex 布局细节与兼容处理。
直接换 display: flow-root 或 display: flex，别碰图文环绕类 float；清除浮动不用加空标签，也别硬套 overflow: hidden。
哪些 float 必须保留，哪些必须干掉
先扫一遍 CSS 文件，重点看使用场景：
-
img、figure等元素带float: left/right+margin实现图文环绕 → 保留。这类语义准确、兼容稳，改了反而容易文字截断或基线错位 -
.sidebar、.main这类容器级 class 带float+width撑多栏 → 必须重构。这是浮动最典型的误用，缩放、字体加载延迟、RTL 切换都可能崩 - 父容器有
overflow: hidden、zoom: 1或一堆<div class="clear"></div>→ 明确信号：浮动已失控，优先处理这些父级
用 display: flow-root 替换 overflow: hidden 清浮动
老代码里满屏的 overflow: hidden 并不是真想裁内容，只是“止血”——它会意外遮住 box-shadow、弹出菜单、position: absolute 子项，甚至让 getBoundingClientRect() 返回错误尺寸。
- 全局搜索
overflow:\s*hidden;（注意空格），排除轮播图、裁图容器等真需要裁剪的场景 - 替换成
display: flow-root;，刷新页面拖拽窗口，检查阴影是否可见、下拉框是否被挡 - 若需兼容 IE11，加
@supports not (display: flow-root) { ... }回退到伪元素法
把 float 布局改成 flex 时的关键细节
别只改 display，否则小屏下文字被压缩、间距消失、对齐错乱全是大概率事件：
立即学习“前端免费学习笔记（深入）”；
- 原
.nav-item { float: left; margin-right: 10px; }→ 改成.nav { display: flex; gap: 10px; }，或兼容写法：margin-right: 10px;+:last-child { margin-right: 0; } - 原左固定宽 + 右自适应布局 → 别写
flex: 0 0 200px+flex: 1，改用flex: none和flex: auto，更稳定 - 原来靠
vertical-align: middle对齐图标？flex里失效，统一加align-items: center到父容器 - 注意
flex-shrink: 1默认开启，小屏下子项会被压缩 → 加flex-shrink: 0或设min-width
必须保留 float 时怎么收尾
有些场景绕不开 float（比如 CMS 输出的富文本中图片自动浮动），那就得控制副作用：
- 统一加上
box-sizing: border-box，避免 padding/margin 计算混乱 - HTML 中删掉浮动元素之间的换行和空格，或用注释连起来：
<img><!-- --><p>，防止 inline 元素间空白生成间隙 - 父容器加
display: flow-root包裹，而不是靠overflow: hidden强压
真正难的不是换掉 float，而是识别哪些是“假浮动”——看着像布局，其实是语义残留；哪些是“真浮动”，动了就影响内容流。重构前花两分钟通读 HTML 结构比盲目替换 CSS 更省时间。
