改float会卡动画，因其强制触发主线程重排：需重扫浮动节点、重算文字环绕、重测容器高度、重排后续内容，无法GPU加速；应改用visibility/opacity隐藏、transform位移、Flex对齐替代。
动画执行中改 float 会强制触发重排（reflow），导致卡顿、掉帧，这不是“效果不好”，而是浏览器必须重新计算整个块级上下文的布局——它根本没法缓存或增量更新。
为什么改 float 会卡动画？
浮动元素的位置依赖文档流中其他浮动项的边界和文字环绕范围，每次 float 值变化（比如从 left 切到 none），浏览器就得：重新扫描所有兄弟浮动节点、重算文字流包裹路径、重测容器高度、重排后续所有非浮动内容。这个过程无法被 GPU 加速，只能走主线程 layout + paint。
- DevTools 的 Rendering 面板里 Layout 时间常 >16ms，直接拖垮 60fps
- 在 iOS 微信 X5 内核或 Android 4.4 WebView 中，这种重排可能放大数倍
- 哪怕只是 hover 时切换
float，也会让相邻段落文字“跳动”
用什么替代 float 控制动画位置？
要位移、显隐、对齐，全部绕开 float，选浏览器能合成、能缓存的属性：
- 视觉隐藏 → 改用
visibility: hidden或opacity: 0+pointer-events: none - 水平/垂直位移 → 用
transform: translateX()或translateY()，确保加will-change: transform或transform: translateZ(0)触发合成层 - 左右对齐切换 → 不要切
float: left/right，改用 Flex 容器 +justify-content或单个子项加margin-left: auto - 需要“滑入侧边栏”效果 → 移除
float，改用transform: translateX(-100%)→translateX(0)
哪些场景最容易误用 float 动画？
老项目迁移时最常踩坑的地方：
- JS 动态设置
element.style.float = 'left'实现“显示菜单”，应统一替换成 class 切换 +transform - 轮播组件用
float: left排图，再靠clear: both清除 → 换成display: flex+flex-wrap: nowrap+scroll-snap - 下拉面板靠
float: right对齐触发按钮 → 改用position: absolute+right: 0，或 Flex 容器内margin-left: auto - 动画中同时改
float和width→ 这是双重重排，必卡，必须拆开：先transform位移，再用transition单独控尺寸
真正难的不是“怎么写动画”，而是删掉那行 float 后，发现 JS 里读取的 offsetLeft 或 getBoundingClientRect() 值变了——这说明逻辑已隐式依赖浮动布局，得连带验证定位基准是否还成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
