应弃用 float 改用 display: flow-root、flex 或 grid，因其避免脱离文档流导致的连锁重绘，提升性能与可维护性。
直接用 display: flow-root 或 flex/grid 替代 float，别再给浮动元素加动画、圆角或阴影——这些操作会放大重绘范围，且现代布局方案在性能和可维护性上全面胜出。
为什么 float 一动就重绘一大片？
浮动元素脱离文档流后，后续非浮动兄弟元素（比如段落、<img alt="怎么在CSS单页应用中避免浮动导致的重绘与回流？" >、position: relative 的后代）的定位都依赖它的占位边界。一旦它重排（例如图片加载完成导致高度变化），浏览器不仅要重绘它自己，还可能连带重绘被“推下去”的整行文字、环绕图文块，甚至影响父容器的 containing block 计算。在 DevTools 的 Rendering > Paint flashing 里能看到高频闪烁区域。
clear: both 是重绘放大器，不是收尾方案
clear: both 看似干净，实际会让浏览器回溯前面所有浮动节点来确认“清除点”，打断渲染流水线，把局部重排升级成整块重绘。尤其在滚动加载列表时，每个新 item 都带一个 clear: both，性能损耗是累加的。
- 绝对不要在循环生成的 item 上重复写
clear: both - 若必须用伪元素清除，直接引入
postcss-clearfix自动生成，别手写::after - 老浏览器兼容（IE11 及以下）时，可用
overflow: hidden替代，但要检查是否意外截断下拉菜单或阴影
现代布局替代 float 的实操取舍
纯布局场景下，float 已基本被 flex 和 grid 取代——它们布局计算可缓存、增量更新粒度更细，且不依赖全局浮动上下文。
立即学习“前端免费学习笔记（深入）”；
- 图文环绕需求？只对
<img alt="怎么在CSS单页应用中避免浮动导致的重绘与回流？" >单独用float: left，其他内容保持标准流，缩小影响范围 - 需要缩放/位移动画？用
transform: scale()或translateX()替代改width/height/margin - 真正要动画的元素才设
will-change: transform，动画结束立刻用 JS 清掉；别写will-change: all或批量加到列表项上 -
display: flow-root是最轻量的 BFC 创建方式，不裁剪position: absolute子元素，也不影响 margin collapse
动画场景下 float 必须移除
给 float 元素加 transform: translateX() 不会提升为合成层，因为它的渲染上下文仍绑定在主文档流中。结果是动画帧由主线程 layout + paint 完成，容易掉帧，且 hover 时可能连带重排相邻文字流。
- 移除
float，改用display: flex或display: grid布局，再加transform就能走 GPU 合成 -
border-radius+box-shadow别套在浮动容器上——圆角和阴影会显著扩大重绘像素量 - 避免对
float元素本身做transition动画，尤其是同时改width或margin，这直接触发 layout + paint
真正难处理的不是“怎么清除浮动”，而是“为什么还在用浮动”——多数所谓“必须用 float”的场景，其实只是没及时更新布局思维。一旦切换到 flow-root 或 flex，很多重绘问题就自然消失了。
