根本原因是body宽度收缩：windows系统右键弹出菜单时隐藏滚动条，导致body可用宽度突增，浮动元素因依赖父容器宽度重算位置而右移。解决方法是给body加overflow-y: scroll和width: 100vw锁定宽度。
右键菜单弹出时浮动元素突然右移，根本原因是body宽度收缩
浏览器在显示原生右键菜单时，会临时隐藏滚动条（尤其在Windows系统），导致body可用宽度瞬间变大——而浮动布局依赖父容器宽度计算位置，一旦body宽度突变，所有基于float的元素都会“被推着往右跑”。这不是JS干扰或CSS错写，是浏览器渲染层的真实行为。
验证方法很简单：打开开发者工具，手动删掉body的overflow-y: scroll（或类似强制滚动条显示的样式），再右键触发菜单，位移现象就会复现。
- 只在Windows + Chrome/Edge/Firefox常见；macOS因常驻滚动条基本无此问题
- 影响范围不限于菜单本身，整个浮动布局区域都可能偏移，包括侧边栏、广告位、工具栏
-
position: fixed元素不受此影响，因为它脱离文档流，不响应body宽度变化
锁定容器宽度最稳的方式：给body加固定宽度并强制滚动条常驻
不要试图用JS监听右键事件再动态设宽——时机难抓、易漏、且菜单已弹出再改就晚了。直接从根上堵住宽度变化源头：
- 在
body上加overflow-y: scroll，确保滚动条始终存在（哪怕内容不够长） - 配合
width: 100vw，让body宽度严格等于视口宽度，不随滚动条显隐浮动 - 若项目已有
html { overflow-x: hidden }之类规则，需检查是否与body的overflow冲突，优先以body为准
示例CSS：
body {
overflow-y: scroll;
width: 100vw;
margin: 0; /* 防止默认8px外边距干扰 */
}
为什么不用calc(100vw - 17px)来“补偿”滚动条？
有人想用width: calc(100vw - 17px)模拟滚动条占位，这不可靠：
- 滚动条宽度不是固定17px：高DPI屏下可能20px，macOS自定义主题下可能0px
-
calc()在body上兼容性虽好，但和overflow组合时，某些旧版Firefox会触发重排抖动 - 真正的问题不在“少了17px”，而在“宽度发生了变化”——只要变化发生，浮动就可能位移
所以宁可多占17px空间（用户几乎感知不到），也不要冒险引入动态计算。
浮动容器内部还要额外处理吗？
如果浮动元素的直接父容器是.sidebar这类自定义块，它本身没设宽，那即使body锁死了，它仍可能因内部浮动未清除而高度塌陷，间接影响定位稳定性：
- 务必给该父容器加伪元素清除浮动：
.sidebar::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden清除，它可能意外裁掉position: absolute的下拉菜单或tooltip - 若该容器还用了
padding或border，确认已设box-sizing: border-box，否则width计算会失准
位移问题看着像视觉bug，实则是浮动布局对文档流宽度变化极度敏感的自然表现。锁住body宽度是最小侵入、最高确定性的解法，其他任何绕开它的尝试，迟早会在某个右键瞬间暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
