应弃用 float 改用 display: flow-root、flex 或 grid，因其避免脱离文档流导致的连锁重绘，提升性能与可维护性。

直接用 display: flow-root 或 flex/grid 替代 float，别再给浮动元素加动画、圆角或阴影——这些操作会放大重绘范围，且现代布局方案在性能和可维护性上全面胜出。

为什么 float 一动就重绘一大片？

浮动元素脱离文档流后，后续非浮动兄弟元素（比如段落、、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 取代——它们布局计算可缓存、增量更新粒度更细，且不依赖全局浮动上下文。

CSS工具箱(专业版)

全功能 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，很多重绘问题就自然消失了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！