浮动元素不能安全参与hover缩放动画，必须停用float改用现代布局：因float导致父容器塌陷、定位漂移及重排叠加，加transform:scale()会引发抖动；应移除float、父容器设display:flow-root、子元素hover时仅用transform缩放并锁定box-sizing。
浮动元素本身不能安全参与 hover 缩放动画，强行加 transform: scale() 会因塌陷、定位漂移和重排叠加导致抖动——必须停用 float，改用现代布局 + 稳定盒模型。
为什么 float + scale 一定会抖
浏览器禁止对 float 属性做过渡或动画，你写的 transition: transform 看似生效，实则每帧都在触发重排：浮动元素脱离文档流，父容器高度常为 0（塌陷），scale() 放大后内容撑开父高，位置“往上弹”；同时兄弟浮动项重新贴靠，视觉上就是整行跳动。Chrome DevTools 的 Performance 面板里会出现密集的 Layout 事件。
-
float: left元素加transform: scale(1.1)，起点坐标受塌陷影响不稳定 - 用
transform: translateX(50%)这类百分比位移，在帧间四舍五入产生亚像素偏移 - 父容器若靠
overflow: hidden清除塌陷，iOS Safari 下首次渲染高度为 0，动画开始时“闪一下再撑开”
替换 float 的三步落地法
不改结构、不加 JS，纯 CSS 替换浮动并支持平滑缩放：
- 移除所有
float: left/right，给原浮动项设display: block或inline-flex - 给它们的**直接父容器**加
display: flow-root（不是overflow: hidden），确保高度正确且无裁剪风险 - hover 时只作用于子元素自身：
.item:hover { transform: scale(1.1); transition: transform 0.2s ease; transform-origin: center center; }
若原布局依赖 float: right 实现右对齐，改用 margin-left: auto（父为 flex）或 justify-content: flex-end，比硬调 transform 更可控。
盒模型必须全程锁定
哪怕已停用 float，scale() 放大仍可能挤开相邻元素或溢出容器，引发间接抖动：
- 外层容器加
overflow: hidden，兜底裁剪溢出部分 - 放大元素自身设
box-sizing: border-box，且常态就写好占位边框：border: 2px solid transparent，hover 时只改border-color - 避免在 hover 中变更
padding、margin、width、height—— 这些都会触发重排，哪怕只变 1px - 如需提升渲染稳定性，加
will-change: transform，但仅限该元素，别污染父级
移动端和旧浏览器的兼容红线
IE11 不支持 flow-root，Safari 15.3 及更早不支持 scrollbar-gutter，但抖动问题根源不在这些：
- 对 IE11：退回到
overflow: auto（非hidden）清除塌陷，它比::afterclearfix 更轻量且无 DOM 干扰 - 别在 hover 中用
display: flex切换布局上下文——基础态就必须是display: flex，否则进出时基线重算导致伪元素下跳 - 验证是否真稳定：用 DevTools 手动切换
:hover，盯住 Computed 标签页里的width、height、margin-top值——它们必须分毫不差
真正稳定的 hover，是连 getBoundingClientRect() 在 hover 前后返回的 x、width 都完全一致。这点容易被忽略，但它是抖动是否根除的硬指标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
