根本原因是box-sizing默认为content-box：width:100%仅设内容宽，padding和border额外叠加导致总宽超视口；需全局设置, ::before, *::after { box-sizing: border-box }并约束img、iframe等替换元素尺寸。
为什么加了 padding 或 border 就出现横向滚动条
根本不是“多了一点像素”那么简单——是 box-sizing 默认值为 content-box，导致 width: 100% 只算内容区，而 padding 和 border 会额外加在外部，实际总宽度 = 100% + padding × 2 + border × 2。浏览器按真实占用宽度计算，一旦超过视口，就强制出横向滚动条。
常见触发场景：
- 父容器设了
padding: 20px，子元素又写了width: 100% - 卡片组件用了
border: 1px solid #ccc+width: 33.333%三列布局 - 全局重置漏掉了
*::before和*::after，伪元素也受content-box影响
修复方式只有一条硬规则：* { box-sizing: border-box; } 必须覆盖所有元素（含伪元素）。别只写 *, *::before, *::after 就完事——检查开发者工具的 computed 样式里，每个关键容器的 box-sizing 是否真为 border-box。
图片、iframe、SVG 撑宽页面怎么办
这些是替换元素，默认不响应父容器宽度。哪怕父容器 width: 100% 且 box-sizing: border-box，它们仍按原始尺寸渲染，直接突破边界。
必须逐个加约束：
-
img：统一加max-width: 100%; height: auto;，不能只靠父容器控制 -
iframe：除了width: 100%，还要确保其父容器有明确宽度（不能是fit-content或未设width的 flex 项） -
svg：同img，加max-width: 100%；若内联 SVG，还需设height: auto防止比例错乱 - 绝对定位的媒体元素（如轮播图指示器）：检查
left/right值是否超出父容器范围，临时加outline: 1px solid red可视化定位
浮动布局和 inline-block 空白间隙怎么破
浮动项之间换行或空格，会被渲染成约 4–8px 的文本节点间隙；inline-block 元素同理。4 个 width: 25% 的盒子，光间隙就可能多出 20px+，小屏下必溢出。
不要删 HTML 换行——格式化工具一跑就回来。有效解法：
- 父容器设
font-size: 0，子元素再单独设font-size（如font-size: 14px） - 改用
display: flex，天然忽略空白，且flex-wrap: wrap更可控 - 如果必须用浮动，清除必须作用于父容器本身，而非末尾加
<div style="clear:both"></div>；推荐display: flow-root（现代浏览器）或伪元素.clearfix::after
注意：移动端对这类间隙更敏感，font-size: 0 在 iOS Safari 下偶尔有兼容问题，优先迁移到 Flexbox。
overflow-x: hidden 是万能解药吗
不是。它只是藏起滚动条，不解决溢出根源。一旦用户缩放页面、切换设备方向，或 JS 动态插入内容，被隐藏的部分可能突然“弹出”，甚至触发意外重排。
仅在以下情况可短期使用：
- 调试阶段快速验证是否真由横向溢出引起（配合
outline定位） - 第三方组件无法修改样式，且确认其内容不会动态增长
- 全屏类应用（如 PWA），已严格控制所有子元素尺寸
真正安全的做法，是让每个子元素主动适应边界：用 max-width: 100%、min-width: 0（对 flex 子项）、table-layout: fixed（对表格），而不是依赖父容器一刀切地 hidden。最常被忽略的一点：伪元素（::before/::after）也可能生成不可见但占空间的内容，务必检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
