应避免动态修改 float 触发重排，改用 visibility/opacity + transform 优化；清除浮动优先用 display: flow-root 替代 clearfix，现代浏览器已广泛支持。
浮动频繁切换会强制触发重排
用 JavaScript 动态修改 element.style.float（比如在滚动中切 float: left 和 float: none）会不断破坏文档流，浏览器必须重新计算整个块级上下文的布局。这种重排在移动端尤其明显——WebView 渲染管线更敏感，一次切换就可能掉帧。
- 改用
visibility: hidden或opacity: 0+pointer-events: none控制显隐，不触发布局 - 需要位移时，优先用
transform: translateX()，它走合成层，GPU 加速，只重绘甚至不重绘 - 别在
transform动画里同时改width、height或float，否则照样触发重排
清除浮动的伪元素在滚动中反复重排
老项目常用 .clearfix::after { content: ""; display: table; clear: both; }，但当浮动子项高度随内容动态变化（如图文混排、异步加载文本），每次高度变动都会让父容器反复进入重排流程，连带影响后续兄弟元素。
- 用
display: flow-root替代，原生创建 BFC，无副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 - 若需兼容 Safari overflow: auto，但注意它会截断
box-shadow和position: absolute溢出内容 - DevTools 中开启 “Layout Shift Regions”，能直接看到哪些区域因清除逻辑被反复重排
浮动 + 视口缩放导致像素级重排抖动
iOS Safari 和高 DPR 安卓设备（如 Pixel 7）在 pinch-zoom 或启用「更大字体」后，会引入 subpixel 渲染，让 float: left 元素的宽度计算出现 0.5px 偏差。这个微小误差常触发换行或间隙，进而导致容器高度突变，引发连锁重排。
- 避免用
width: 50%实现两栏，改用flex-basis: 50%，它受 flex 容器约束，不随缩放漂移 - 给浮动父容器加
min-width: 0+overflow: auto，防止子项因默认min-width: auto撑破容器 - 不要依赖
getBoundingClientRect().width做布局判断——缩放后值会跳变，应改用clientWidth或监听resize事件重算
JS 隐式依赖浮动位置导致布局错乱
很多性能问题表面在 CSS，根子在 JS：比如动画起点靠 offsetTop 读取浮动后坐标，或用 float 辅助 position: absolute 定位。一旦换成 flex 或缩放发生，这些值全失效，JS 只好反复轮询、重算、重排。
立即学习“前端免费学习笔记（深入）”；
- 检查所有调用
getBoundingClientRect()、offsetTop、offsetLeft的地方，确认是否假设了浮动已生效 - 靠浮动“撑开”父容器再读高度的逻辑，要同步迁移到
flow-root或flex后的scrollHeight判断 - 如果用了
resize监听配合清除浮动，清除代码可删，但 JS 里基于“清除后高度”做的状态判断必须重写
