应直接弃用 float 而非优化它，因其导致频繁重排重绘；推荐用 display: flow-root 创建 BFC 清除浮动，图文环绕仅对 img 使用 float，长页面优先采用 flex/grid + shape-outside 等现代布局方案。
直接换掉 float，别优化它——这是最有效、最省事的“优化”。
为什么 float 本身就不适合长页面图文流
浮动元素脱离文档流后，后续文字、图片、position: relative 容器的定位都依赖它的占位边界。一旦某张图加载完成导致高度变化，浏览器必须重排它自己 + 重绘被它推下去的整行文字、环绕块、甚至父容器的 containing block。DevTools 的 Rendering > Paint flashing 里会高频闪烁一大片区域。
更麻烦的是：clear: both 不是收尾工具，而是重绘放大器。它强制浏览器回溯前面所有浮动节点来确认清除点，把局部重排升级成整块重绘。滚动加载列表时，每个新 item 带一个 clear: both，性能损耗是累加的。
用 display: flow-root 替代包裹容器
这是现代清除浮动最轻量、最安全的方式，天然创建 BFC，不裁剪 position: absolute 子元素，也不影响 margin collapse。
立即学习“前端免费学习笔记（深入）”；
-
.article-content { display: flow-root; }就够了，不用再写伪元素或overflow: hidden - IE11 及以下才需要降级：改用
overflow: hidden，但务必检查是否意外截断下拉菜单、阴影或transform溢出内容 - 绝对不要在循环生成的 item 上重复写
clear: both；若必须用伪元素清除，用postcss-clearfix自动生成，别手写::after
图文环绕场景只对 <img> 单独用 float
如果真要保留文字绕图效果（比如新闻正文），只对 <img> 元素设 float: left 或 float: right，其他内容（段落、标题、引用块）全部保持标准流。这样能最小化重排影响范围。
同时注意避开几个高代价操作：
- 别给
float元素加border-radius+box-shadow：圆角和阴影会显著扩大重绘像素量 - 别对
float元素做transition动画，尤其是改width或margin—— 这直接触发 layout + paint - 需要缩放/位移？改用
transform: scale()或transform: translateX()，但前提是先移除float；否则transform不会提升为合成层，动画仍在主线程跑
真正该用的现代布局方案
长页面图文流本质是线性内容 + 局部装饰，flex 和 grid 才是正解：
- 主内容用
display: flow-root或默认文档流，图文环绕需求用shape-outside（配合clip-path更可控） - 侧边栏、推荐卡片、广告位等独立模块，统一用
display: flex或display: grid布局，再加transform就能走 GPU 合成 - 动画元素才设
will-change: transform，动画结束立刻用 JS 清掉；别写will-change: all，也别批量加到列表项上
浮动不是性能瓶颈的“症结”，而是整个布局模型已过时的信号。修复它不如替换它——尤其当页面要支持滚动加载、响应式、无障碍访问时，float 的兼容成本远高于迁移成本。
