横向滚动条应从根源杜绝生成，而非出现后隐藏；根本原因是元素 scrollWidth > clientWidth，常见于盒模型误差、负边距、flex 子项未设 min-width: 0、图片未限宽、Bootstrap .row 的负 margin 及伪元素等内容撑宽。
横向滚动条不是“出现了才去藏”，而是“从根上不让它有生成条件”。几乎所有移动端横向溢出，都源于某个元素的 scrollWidth > clientWidth，而这个差值往往来自被忽略的盒模型、负边距、未约束的弹性项或媒体元素失控。
为什么 overflow-x: hidden 有时无效
设了 overflow-x: hidden 还有滚动条，说明浏览器根本没把该元素当作“可裁剪容器”来处理——常见于：
- 父级是
display: flex且没设flex-shrink: 0，导致容器被内容撑宽，overflow失效 -
html或body自身有默认margin: 8px（尤其 Safari 移动端），直接让整个文档变宽 - 子元素用了
position: absolute或fixed，脱离文档流后仍参与scrollWidth计算 - 设置了
width: 100vw但视口缩放（如双击放大）或viewport配置不严谨，导致实际宽度超标
flex 子项撑破容器：必须重设 min-width
Flex 容器设了 overflow-x: hidden 却仍溢出，90% 是因为子项默认 min-width: auto 锁死了收缩下限。浏览器宁可撑宽容器也不让子项压缩，结果 overflow 形同虚设。
- 所有 Flex 子项必须显式加
min-width: 0（文字/图片类内容）或min-width: 0+overflow: hidden（防文本溢出） - 用
flex: 0 0 fit-content替代flex: 0 0 auto更可控，但注意 Safari 12.1+ 才支持 - 含图片的子项务必加
img { max-width: 100%; height: auto; }，否则图片原始尺寸会直接突破flex-basis
Bootstrap .row 是隐藏溢出源
直接在 body 或 flex 父容器里写 <div class="row">，等于主动引入两个 <code>margin-left: -15px 和 margin-right: -15px。它们不会被抵消，而是直接拖出视口边界。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 中
.row的boundingClientRect：若leftright >window.innerWidth，就是它 - 嵌套时，外层
.col必须加overflow-hidden（Bootstrap 5 内置）或max-width: 100% -
gx-类只对.row生效，加在.col上完全无用——查不到--bs-gutter-x就说明没继承到
图片、视频、伪元素这些“安静的撑宽者”
它们不报错、不警告，但一个没设 max-width: 100% 的 <img alt="如何在移动端CSS开发中彻底消除横向滚动条的产生" >，或一个 ::before 里写了 content: " "（全角空格），就能让 body.scrollWidth 悄悄多出 16px。
- 全局重置比局部修复更可靠：
img, video, iframe { max-width: 100%; height: auto; } - 浮动布局残留？加
* { box-sizing: border-box; }+html { margin: 0; }兜底 - 调试时临时给
body加outline: 2px solid red，再逐个outline子元素，溢出部分一眼可见
真正难的不是加哪条 CSS，而是判断哪个元素在“悄悄变宽”——它可能藏在第三层嵌套的伪元素里，也可能来自一个被 transform: translateX() 推出去却仍参与滚动计算的绝对定位块。动手前先开 DevTools 量 scrollWidth，比盲目加 overflow-x: hidden 有效十倍。
