浮动元素hover抖动的根源是样式变化导致渲染尺寸或布局占位改变，进而引发重排；解决关键是hover前后保持box-sizing、border、padding、margin完全一致，优先用transparent边框或outline替代border，必要时用flex/grid替代float。
浮动元素hover时重排导致抖动的根源
根本原因不是hover本身，而是hover触发的样式变化（比如border、padding、margin或transform）改变了元素的**渲染尺寸或布局占位**，而浮动元素又依赖父容器和兄弟元素的尺寸做位置计算——一变全乱，浏览器反复重排，视觉上就抖。
hover前后保持盒模型一致的实操方案
关键：让hover态和常态的box-sizing、border、padding、margin完全一致。常见错误是hover加border: 2px solid #007bff，但常态没设border，等于突然多出4px宽高。
- 常态就写好占位边框：
border: 2px solid transparent，hover时只改border-color - 用
outline替代border（它不参与布局计算），但注意outline不支持圆角、不能精准控制某一边 - 如果必须加内边距，常态用
padding预留空间，hover时只调background-color或color - 慎用
transform: scale()——虽然不触发重排，但可能因亚像素渲染在某些浏览器下仍有微抖，优先用opacity或filter: brightness()
浮动容器内部子元素hover抖动的特殊处理
当浮动的是父容器（如float: left的.card），而你hover的是它里面的.btn，抖动往往来自父容器因子元素尺寸变化而“重新贴靠”。这时问题不在.btn，而在浮动父容器的宽度不稳定。
- 给浮动父容器设固定
width或min-width，避免内容撑开 - 子元素用
display: inline-block或flex布局，别让它影响浮动流 - 更彻底的解法：用
display: flex或display: grid替代float——现代布局下浮动本就不该再承担主要布局职责 - 若必须保留浮动（如兼容IE8），可在hover前强制触发一次
will-change: transform，但仅作兜底，别滥用
验证是否真解决：看computed style和layout shift
别只凭肉眼判断“好像不抖了”。打开浏览器开发者工具，选中元素，在Styles面板里手动切换:hover状态，盯住Computed标签页里的width、height、margin、border-width这些值——它们必须完全不变。再打开Performance面板录一段悬停操作，看有没有Layout事件密集出现。
立即学习“前端免费学习笔记（深入）”；
真正稳定的hover，是连getBoundingClientRect()在hover前后返回的width和x都分毫不差。这点容易被忽略，但恰恰是抖动是否根除的硬指标。
