float元素重绘影响大是因为其脱离文档流后，后续元素定位依赖其占位边界，一旦重排会连带重绘被推下的整行文字、图文块及父容器；clear:both会回溯所有浮动节点导致整块重绘；应优先用display:flow-root或flex/grid替代。
float 元素为什么连带重绘一大片区域
浮动元素脱离文档流后，后续非浮动兄弟元素（比如段落文字、<img>、position: relative 的后代）的定位都依赖它的占位边界。一旦 float 元素重排（比如图片加载完成导致高度变化），浏览器不仅要重绘它自己，还可能重绘被它“推下去”的整行文字、环绕的图文块，甚至影响父容器的 containing block 计算——这些区域在 DevTools 的 Rendering > Paint flashing 里会高频闪烁。
- 别在 float 容器里塞
border-radius+box-shadow：圆角和阴影会显著扩大重绘像素量 - 避免对 float 元素本身做
transition动画，尤其是同时改width或margin—— 这直接触发 layout + paint - 如果必须图文环绕，只对
<img>单独用float: left，其他内容保持标准流，缩小影响范围
clear: both 是重绘放大器，不是解决方案
clear: both 看似收尾干净，实际会让浏览器回溯前面所有浮动节点来确认“清除点”，这个过程强制打断渲染流水线，把原本局部的重排升级成整块区域重绘。尤其在滚动加载列表时，每个新 item 带一个 clear: both，性能损耗是累加的。
- 优先用
display: flow-root包裹整个浮动容器：.card-list { display: flow-root; }，天然创建 BFC，不裁剪position: absolute子元素，也不影响 margin collapse - 兼容老浏览器（IE11 及以下）时，改用
overflow: hidden，但要检查是否意外截断下拉菜单或阴影 - 绝对不要在循环生成的 item 上重复写
clear: both；若必须用伪元素清除，直接引入postcss-clearfix自动生成，别手写::after
动画场景下 float 必须移除
给 float 元素加 transform: translateX() 不会提升为合成层，因为它的渲染上下文仍绑定在主文档流中。结果是动画帧由主线程 layout + paint 完成，容易掉帧，且 hover 时可能连带重排相邻文字流。
- 移除
float，改用display: flex或display: grid布局，再加transform就能走 GPU 合成 - 需要缩放效果？用
transform: scale()替代改width/height - 真正要动画的元素才设
will-change: transform，动画结束立刻用 JS 清掉，别写will-change: all或批量加到列表项上
现代布局替代 float 的实操取舍
纯布局场景下，float 已基本被 flex 和 grid 取代——它们布局计算可缓存、增量更新粒度更细，且不依赖全局浮动上下文。但两个场景仍需保留 float：
立即学习“前端免费学习笔记（深入）”；
- 图文环绕：只有
float: left/righton<img>能让文字自然绕排，shape-outside兼容性差且复杂 - 无法重构的遗留侧边栏：若 DOM 结构僵硬、JS 逻辑强耦合 float 位置，强行换 flex 可能引发连锁 bug
这两类情况之外，只要能改，就该改。不是“少用 float”，而是“不用”。重绘问题的根子不在 float 本身，而在它迫使浏览器反复验证浮动边界与文字流关系——这种不可缓存的计算，在现代布局里根本不存在。
