必须立刻替换三类float：多栏布局（如float:left+width:33.33%）、靠margin-left:-9999px或clear:both强行定位、JS中直接操作element.style.float；图文环绕类float保留。
直接删掉所有用于布局的 float，换成 display: flex 或 display: grid；图文环绕类 float 保留不动——它不是技术债，是语义刚需。
哪些 float 必须立刻替换？
只看用途，不看写法。以下三类必须动：
- 用
float: left+width: 33.33%拼多栏布局 → 改display: grid; grid-template-columns: repeat(3, 1fr) - 靠
margin-left: -9999px或clear: both强行“挤”位置 → 这类逻辑已不可维护，直接重写容器结构 - JS 里调用
element.style.float = 'left'控制显隐/位移 → 必须换为transform: translateX()+opacity，否则每帧触发重排
为什么不能全局搜索 replace float:left → flex
因为 float 和 flex 的行为模型完全不同：
-
float脱离文档流但影响周围文本流；flex子项仍在流内，且默认align-items: stretch→ 原来高度自适应的卡片可能被拉满，需加align-items: flex-start -
float不占满父容器宽度；flex项默认flex-shrink: 1→ 小屏下文字被压缩，得显式设flex-shrink: 0或min-width - 原靠
margin-right分隔的浮动项，换成gap后要删掉所有marginhack，否则父子 margin 叠加
display: flow-root 是不是万能清除方案？
它是现代清除浮动最安全的单行解，但只适用于「父容器需要包住浮动子项」这一种场景：
立即学习“前端免费学习笔记（深入）”；
- 把旧代码中
overflow: hidden替换为display: flow-root，能避免裁剪box-shadow、遮挡下拉菜单等问题 - 但它不解决布局问题——如果父容器本身是
display: flex或display: grid，再加display: flow-root会冲突失效 - IE11 完全不支持，若需兼容，只能回退到伪元素清除法，且必须确保父元素没用
display: flex（否则伪元素无效）
重构后最常漏掉的三类残留
真正卡住上线的往往不是样式，而是隐性依赖：
- HTML 中仍按浮动顺序写 DOM（如左栏必须写在右栏前）→ Grid 下可用
grid-column: 2随意调整视觉顺序，不必迁就 - 注释里还留着
// 清除浮动防止塌陷→ 这类注释建议直接删，否则新人会误以为还在起作用 - JS 里监听
window.resize后手动计算offsetHeight补高度 → Grid/Flex 下高度自动计算，这类逻辑全部失效，必须移除
重构浮动布局最难的不是写新 CSS，而是确认还有多少地方默认“float 仍在控制布局”。哪怕只漏掉一处 JS 里的 getBoundingClientRect() 调用，都可能让页面在某个断点下突然错位。
