float 会导致重排和重绘开销变大，因其使元素脱离文档流，触发父容器BFC检测与子元素位置重计算，布局阶段需反复确认浮动边界和文字环绕范围，且无法缓存，每次DOM或样式变更都可能引发整块区域layout dirty check。
float 为什么会导致重排和重绘开销变大
浮动元素会脱离文档流，触发父容器的“BFC 创建检测”和子元素的“位置重计算”。浏览器在布局阶段必须反复确认浮动边界、文字环绕范围、后续兄弟元素的定位起点——这些判断无法被缓存，每次 DOM 变更或样式更新都可能触发整块区域的 layout dirty check。
常见错误现象包括：float 布局嵌套三层以上时，resize 窗口或 hover 触发伪类时明显卡顿；使用 clear: both 的兄弟元素频繁闪烁；DevTools 的 Rendering 面板中 Layout 时间持续高于 16ms。
优化思路不是“少用”，而是“换用更可控的机制”：
- 用
display: flex替代float: left/right实现横向排列（支持对齐、换行、伸缩） - 用
display: grid替代多层浮动+清除，尤其适合卡片网格、侧边栏+主内容等固定结构 - 若必须保留
float（如图文环绕），避免在动画元素或高频交互区域使用
clear 属性的隐式性能陷阱
clear 本身不直接消耗资源，但它强制浏览器回溯前序浮动元素的位置，并重新计算当前元素的 top 值。当页面存在大量浮动兄弟节点（比如新闻列表每项都 float: left + clear: both），浏览器需 O(n) 扫描前面所有浮动节点才能确定“清除点”。
典型场景：CMS 后台文章列表页，每条记录用 float: left 排两列，底部加 clear: both 分页栏——滚动加载新项时，新增的 clear 会让整个列表重排。
可行替代方案：
- 改用
flex-wrap: wrap+ 固定宽度子项，自然流式换行，无需clear - 用
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))实现响应式栅格，完全规避清除逻辑 - 若兼容性受限（IE10+），可用
overflow: hidden或display: flow-root触发 BFC 来包裹浮动，比逐个clear更轻量
浮动与 transform 动画冲突的实际表现
给 float 元素加 transform: translateX(10px) 不会提升为合成层，因为浮动元素的渲染上下文仍绑定在主文档流中。结果是动画帧由主线程 layout + paint 完成，容易掉帧。
错误示例：.sidebar { float: left; transition: all 0.3s; } + :hover { transform: translateX(-5px); } —— hover 时不仅触发 repaint，还可能连带重排相邻文字流。
修复方式很直接：
- 移除
float，改用position: sticky或flex布局，再加transform就能走 GPU 合成 - 若必须保留浮动结构，至少把动画目标换成非几何属性（如
opacity或filter: blur()） - 检查 DevTools 的 Layers 面板，确认动画元素是否真的进入了独立图层
