float不可动画，因是离散属性且W3C明确禁止插值；浏览器忽略transition: float，Computed中property显示none；应改用transform或切换为flex/grid布局。
float本身不是可动画属性
浏览器根本不支持对float做插值计算。你写transition: float 0.3s，所有主流浏览器都会直接忽略——DevTools 的 Computed 面板里transition-property显示为none，不是 bug，是规范如此。
W3C 明确将float列为不可过渡属性，它没有连续的中间状态（left/right/none 是离散值），无法生成帧序列。
- 别在 CSS 里写
transition: float，哪怕加了!important也无效 - 用
getComputedStyle(el).float读出来是"left"或"right"，但浏览器不会为它启动合成层 - 浮动元素的位置变化（比如靠左贴边）本质是 layout 计算结果，不是渲染属性，过渡无从谈起
看似“动了”其实是布局重排打断动画
很多人给浮动元素加left或margin-left再配transition，发现“动了一下但没过渡”，真实原因是：浮动脱离文档流后，父容器高度塌陷，每次属性变更都触发强制 layout + paint，主线程被占满，动画帧直接被丢弃。
-
left、top、width等布局属性过渡极易掉帧，尤其在浮动上下文中 - 清除浮动（如
.clearfix::after）只解决父容器塌陷，不解决 layout 阻塞 - 用
transform: translateX()替代left，它走 GPU 合成，不触发重排 - 确保
transition: transform 0.3s写在基础类里，而不是仅在:hover或 JS 切换的 class 中
改用flex或grid时transition突然失效？检查这三处
把float: left换成display: flex后，旧有过渡逻辑大概率崩坏——不是布局换错了，是语义和渲染链全变了。
立即学习“前端免费学习笔记（深入）”；
-
float声明在 flex 容器里完全被无视，但margin仍生效；别指望用float: left微调位置，该用justify-content或margin-left: auto - 原用
overflow: hidden清除浮动，换成 flex 后必须删掉，否则可能意外裁剪下拉菜单等溢出内容 - IE11 只支持旧版 Flex 语法（无
gap、flex-wrap: wrap-reverse），若需兼容，得查 Can I Use 并补-ms-前缀
过渡“第一次不触发”？大概率缺初始值
浮动元素改成 flex 后加了transform过渡，但鼠标第一次悬停还是瞬移——不是代码漏了，是浏览器没拿到起始值。
例如：.item { transition: transform 0.25s; } + .item:hover { transform: translateX(20px); }，但如果.item初始没声明transform: translateX(0)，浏览器会从none→translateX(20px)，而none无法插值，直接跳变。
- 显式写
transform: translateX(0)在基础类中，别依赖默认 - 用 DevTools Computed 面板确认
transform当前值不是none或initial - JS 动态切换 class 时，避免
classList.remove("old").add("new")连写，中间状态丢失 transition 声明；统一用基础类保底
