水平滚动条源于溢出而非max-width本身，需用outline定位越界元素并重置body默认margin；absolute子元素致父容器塌陷、pre/code不换行、第三方组件宽值固化及transform/clip-path计算偏差均为常见原因。
水平滚动条不是“有没有”的问题，而是“从哪溢出”的问题——绝大多数情况跟 max-width 本身无关，关键在它没管到的地方。
用 outline 快速定位真实溢出源
别靠猜，用浏览器控制台一行代码就能暴露所有越界元素：
- 在 Console 输入：
document.body.scrollWidth > window.innerWidth，返回true就确认存在水平溢出 - 接着执行：
document.querySelectorAll('*').forEach(el => el.style.outline = '1px solid #f00')，所有元素立刻带红框，溢出部分一目了然 - 若页面太杂，可聚焦排查：
document.querySelectorAll('img, pre, code, iframe, svg')—— 这些是高频溢出元凶
body 默认 margin 是隐藏罪魁
Chrome、Safari、Firefox 都会给 加默认 margin: 8px。缩放时这个固定像素会被放大，直接撑出滚动条。
- 必须重置：
body { margin: 0; }，不能只写html { margin: 0; } - 更稳妥做法是全局清空：
html, body { margin: 0; padding: 0; } - 如果用了 CSS reset 或 normalize，检查是否漏掉了
body的 margin 重置
absolute 元素导致父容器高度塌陷
当父容器里只有 position: absolute 子元素时，父容器高度会塌成 0，此时 overflow: hidden 失效，子元素实际仍参与布局宽度计算。
- 验证方法：选中该父容器，在 Elements 面板看 computed height 是否为
0px - 修复方式：给父容器加明确高度或最小高度，例如
height: 100vh或min-height: 100px - 更健壮的写法是配合
position: relative：.parent { position: relative; min-height: 1px; }，哪怕只是 1px 也能建立 containing block
pre/code 块和第三方组件常被忽略
<pre class="brush:php;toolbar:false;"></pre> 和 <code> 默认 white-space: pre，长行不换行；地图、图表库等常内部写死 width: 1200px 或用 transform: translateX() 脱离文档流。
- 对代码块加防护：
pre, code { overflow-x: auto; white-space: pre-wrap; } - 对第三方容器，临时加
outline: 2px solid orange并逐个display: none !important排查 - 特别注意
GSAP动画中的x偏移值——即使视觉不可见，只要数值大，仍会扩大布局宽度
最麻烦的溢出往往藏在 transform、clip-path 或 SVG viewBox 计算偏差里，这些不会报错、不显 outline，得靠 scrollWidth + 逐层关闭子树来揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
