浮动已基本被淘汰，动态修改float值会触发重排导致卡顿；应改用visibility/opacity隐藏、transform位移、Flex/Grid对齐，并用flow-root替代clearfix，配合DevTools定位重排区域。
浮动（float）本身已基本被现代布局方式淘汰，但它在老项目或某些特殊场景中仍可能出现。当频繁修改浮动元素的 float 值（比如通过 JS 切换 float: left / float: none），会强制触发浏览器重排（reflow），尤其在容器内容较多或滚动区域中，极易造成卡顿、掉帧，影响滚动性能。
避免用 float 控制显隐或位置切换
常见错误：用 JS 动态设置 element.style.float = 'left' 或 'none' 来实现“显示/隐藏”或“左对齐/居中”等效果。这会不断破坏文档流，迫使浏览器重新计算整个块级上下文的布局。
- 改用
visibility: hidden或opacity: 0配合pointer-events: none实现视觉隐藏（不触发布局） - 需要位移时，优先用
transform: translateX()替代改变float或margin - 若需切换对齐方式，用 Flex 或 Grid 布局 +
order/justify-content控制，完全脱离浮动流
用 transform 实现高性能位移动画
transform 属于合成层操作，只要不伴随尺寸、盒模型或布局属性变化，浏览器可交由 GPU 加速，不触发重排，只触发重绘（repaint）甚至不重绘（直接合成）。
- 把原本靠
float实现的“侧边栏滑入”改为transform: translateX(-100%)→translateX(0) - 确保该元素有独立的合成层：加
will-change: transform或transform: translateZ(0)（谨慎使用，仅对高频动画元素） - 避免在
transform动画中同时修改width、height、float等触发重排的属性
检查并清理浮动依赖的旧代码逻辑
很多性能问题源于历史代码中“为清除浮动而清除浮动”的连锁反应——比如大量使用 ::after { content: ''; display: table; clear: both; }，一旦父容器高度随子元素浮动频繁变化，就会反复重排整个父级及后续兄弟元素。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flow-root替代clearfix技巧，原生 BFC 创建，无副作用 - 将浮动列表（如图文混排）重构为
display: flex或display: grid，用align-items和gap控制间距 - 用 DevTools 的 Rendering 面板开启 “Paint flashing” 和 “Layout Shift Regions”，定位哪些区域在滚动中频繁重排
基本上就这些。浮动不是不能用，而是不该用来做动态、高频、交互驱动的布局变更。用现代 CSS 布局 + transform 动画，既能保持语义清晰，又能守住 60fps 的滚动底线。
