浮动跳动是父容器塌陷、定位失效、图层冲突和滚动条突变四者交织所致；需用 display: flow-root 清除浮动，禁用无效 float，移除多余硬件加速，并用 scrollbar-gutter 或 padding 补偿滚动条宽度变化。
检查父容器是否塌陷
浮动元素脱离文档流后，父容器高度常变成 0，这是跳动最底层的诱因。浏览器在滚动或重绘时反复计算“本该有高度却没高度”的容器，导致布局基准漂移。
用 Chrome DevTools 的 Elements 面板选中父容器，看右侧 Computed 标签页里的 height 值——如果明显小于预期（比如显示 0px），基本可确认塌陷。
- 别依赖
overflow: hidden：它虽能撑高，但可能意外裁剪position: absolute下拉菜单 - 优先改用
display: flow-root：现代标准，无副作用，兼容 Chrome 64+/Firefox 59+/Safari 15.4+ - 若需兼容 IE11，用
overflow: auto替代，并确保父容器没设max-height
验证浮动是否还在生效
很多“浮动跳动”实际是伪问题：导航栏被套在 display: flex 或 display: grid 的 header 里，float 已被浏览器忽略，但开发者仍保留相关样式，造成调试干扰。
打开 DevTools → Computed → 搜索 float，如果值是 none 却还写了 float: right，说明它根本没起作用。
- 如果是 flex 容器，把
float全删掉，改用margin-left: auto或justify-content: flex-end - 如果是 grid 容器，用
justify-self: end或place-self: end - 别混用
float和display: inline-block：后者本身会触发重排，加剧抖动
排查硬件加速引发的合成层冲突
transform: translateZ(0) 或 will-change: transform 加在浮动导航栏上，非但不能防抖，反而会强制创建不稳定图层，尤其在 Safari 和旧版 Chrome 中表现为 subpixel 错位、绿色图层闪烁。
打开 DevTools → Rendering → 勾选 Layer Borders，滚动页面：如果导航栏周围频繁出现绿色边框，就是过度分层信号。
- 删掉所有针对
nav、nav ul、nav li的translateZ(0)和backface-visibility: hidden -
will-change不要写死在 CSS 里，它初始化开销高，且浏览器不会自动回收 - 只在真正需要动画的子元素上加
backface-visibility: hidden（比如下划线、关闭图标），单点启用，不扩散
锁定滚动条宽度切断横向跳动链
很多“导航跳动”其实是假象——真正抖的是整个页面左右晃，根源是 body 宽度随滚动条出现/消失而突变（Windows Chrome 固定 17px，macOS Safari 隐藏），连带 position: fixed 导航偏移。
用 html { scrollbar-gutter: stable; overflow-y: auto; } 可预留滚动条空间，但注意它只对 标签有效。
- 不支持
scrollbar-gutter的环境（如旧安卓 WebView），fallback 方案：body { padding-right: calc(100vw - 100%); } - 绝对不要用
margin-right替代 —— 它不参与box-sizing计算，无法撑开容器宽度 - 如果项目用了 modal 弹窗并设置
body.modal-open { overflow: hidden; }，必须同步加 padding 补偿，否则跳动会更剧烈
浮动跳动从来不是单一属性的问题，而是塌陷、定位失效、图层冲突、滚动条突变四者交织的结果。最容易被忽略的，是以为“加了 clear 就万事大吉”，却没检查父容器是否真的在 flex/grid 里——此时 clear 根本不生效，你清的是一场空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
