右侧白边本质是横向溢出，主因包括浮动元素宽度超限（如未设box-sizing: border-box）、兄弟元素总宽超100%、图片/表格等未约束宽度、viewport设置不当等，需用开发者工具、outline描边、scrollWidth比对等方法精准定位并修复。
检查浮动元素及其父容器的 width 和 box-sizing
右侧白边常不是“多出来一块”，而是某个浮动元素或其容器宽度超出了视口。比如 float: left 的盒子设了 width: 50%，但又加了 padding: 20px 且没设 box-sizing: border-box，实际占宽就变成 50% + 40px，超出后触发水平滚动条，视觉上就是右边一条白边。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具（F12），选中疑似浮动的元素，看
Computed面板里的width、padding、border实际像素值 - 重点检查是否漏写了
box-sizing: border-box—— 尤其是用了padding或border却按 content-box 计算的场景 - 用
document.body.scrollWidth > window.innerWidth在控制台快速验证是否真有横向溢出
排查浮动兄弟元素的 width 总和是否超过 100%
多个浮动元素并排时，哪怕每个都设 width: 33.333%，只要存在四舍五入误差、默认 margin、或字体渲染导致的行高微差，就可能让总宽略超 100%，最后一项被挤到下一行，而父容器又没清除浮动，造成右侧“空出一列”的假象。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板里，逐个禁用浮动子元素的
float，观察白边是否消失，定位具体是哪个元素引发溢出 - 对所有浮动子项统一加
margin: 0和vertical-align: top（防止 inline-block 式基线对齐带来的额外高度） - 用
calc(100% / 3)替代手写百分比，减少计算误差；或改用flex的flex: 1自动均分
用 *{outline: 1px solid red} 快速定位撑破边界的元素
这个技巧不依赖浮动逻辑，直接暴露真正越界的元素：它会给页面所有元素加红色描边，哪个元素的描边顶到最右边缘，哪个就是罪魁祸首。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把这段代码存成浏览器书签，链接为：
javascript:(function(){document.body.innerHTML='<style>*{outline:solid%201px%20red!important;}</style>'+document.body.innerHTML;})() - 点击书签后，滚动页面找那个“右边贴死描边”的元素，通常是没设
max-width: 100%的图片、表格、预格式化文本（<pre>）或未约束宽度的第三方组件 - 特别注意
table默认不换行，white-space: nowrap的容器，以及含长英文/数字串无断点的段落
为什么 overflow-x: hidden 不是万能解
body { overflow-x: hidden } 看似立竿见影，但它只是藏起滚动条，不解决根本问题——内容仍被截断，影响可访问性（如屏幕阅读器）、打印样式、以及绝对定位弹层（tooltip、下拉菜单）的显示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅在调试阶段临时加
overflow-x: hidden辅助判断，上线前必须定位并修复真实溢出源 - 若父容器已用
display: flex或display: grid，却仍有白边，大概率是子项用了min-width或固定width值，而非弹性单位 - 移动端尤其要检查
viewportmeta 标签是否缺失或initial-scale设置不当，这会导致整个页面被缩放后意外撑宽
