横向滚动条是盒模型溢出的明确反馈：content-box默认行为、未约束替换元素、flex子项拒绝收缩、伪元素或margin塌陷四类问题覆盖95%场景；必须全局设*{box-sizing:border-box}并约束img/iframe/svg尺寸，flex容器加min-width:0。
滚动条不是“意外”出现的，是盒模型尺寸计算结果明确溢出的直接反馈——content-box 默认行为、未约束的替换元素、flex 子项拒绝收缩、以及伪元素或 margin 塌陷，这四类问题覆盖了 95% 的真实场景。
box-sizing: content-box 是横向滚动条的默认推手
只要父容器设了 padding 或 border，子元素又写了 width: 100%，总宽度就一定是 100% + padding × 2 + border × 2。浏览器按这个真实值计算布局，超视口即出滚动条。
- 必须全局写
* { box-sizing: border-box; }，漏掉*::before和*::after就可能让伪元素撑宽页面 - 检查开发者工具「Computed」面板，确认关键容器的
box-sizing真为border-box，别只信样式表里写了 - 个别组件若真需
content-box（极少见），得显式重置，不能靠默认值
img、iframe、svg 这些替换元素根本不听 width: 100%
它们按原始尺寸渲染，哪怕父容器已设 width: 100% 和 box-sizing: border-box，照样突破边界。这不是 bug，是规范定义的行为。
- 统一加
img, iframe, svg { max-width: 100%; height: auto; } -
iframe还要确保其父容器有明确宽度（不能是fit-content或未设width的 flex 项） - 内联
svg需额外加height: auto，否则比例错乱导致高度异常溢出
flex 容器里子项锁死不缩，滚动条立刻现身
flex 子项一旦含长单词、未设 max-width 的图片、或显式设了 min-width，就会拒绝收缩。它不溢出才怪。
- 在
flex-direction: row的父容器上加min-width: 0 - 在
flex-direction: column的子项（如内容区）上加min-height: 0 -
textarea必须设display: block+width: 100%+height: 100%，仅flex: 1不够
看不见的内容也在撑宽页面
滚动条常由“不可见但占空间”的东西触发：子元素 margin-top 塌陷到父容器外、line-height 导致末行微溢出、零宽空格、甚至 ::before 生成的空内容。
- 临时加
outline: 1px solid red到可疑容器，看红色边框是否包住所有内容 - 若边框和内容间有空隙，大概率是 margin 塌陷；若边框紧贴内容仍有滚动条，优先查
line-height和字体度量 - 给父容器加
padding: 1px或改用display: flex可快速验证是否 margin 问题
真正难处理的不是单个原因，而是多个叠加：比如一个 flex 容器里放了没设 max-width 的 img，而该容器又漏了 min-width: 0，同时父级还用了 content-box —— 这时只修其中一项，滚动条依然存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
