加了max-width仍有水平滚动条是因为它只限制内容区宽度，不控制padding、border、margin、子元素固有尺寸及盒模型计算；需配合box-sizing:border-box、图片max-width:100%、文本换行等才有效。
max-width: 100% 本身不保证不溢出——它只限制内容区最大宽度，对 padding、border、margin、子元素固有尺寸、盒模型计算方式完全无约束。
为什么加了 max-width 还有水平滚动条
这不是 max-width 失效，而是它根本没管到真正撑开页面的地方：
- 父容器用的是
box-sizing: content-box（默认值），max-width: 100%只算内容区，padding 和 border 会额外叠加 - 图片、iframe 等替换元素没配
height: auto，浏览器按原始高度渲染，导致容器高度坍缩或比例错乱 - flex 容器中子项默认
min-width: auto，直接锁死图片最小宽度，max-width: 100%被无视 - 文本节点含长单词或
white-space: nowrap，不换行就硬撑 -
pre或code块没设overflow-x: auto或white-space: pre-wrap，单行代码直接溢出
img + max-width:100% 仍溢出的典型场景
最常翻车的不是写法错，而是上下文干扰：
- 父容器是 flex 项但没设
flex-shrink: 1或min-width: 0→ 图片拒绝压缩 - HTML 中 img 标签自带
width="600"或height="400"内联属性 → 直接覆盖 CSS - 用了
object-fit却没配width: 100%; height: 100%→ 裁剪区域失控 - 第三方地图/图表组件内部用了固定像素宽或
position: absolute偏移 → 完全脱离文档流，max-width对它无效
box-sizing: border-box 不起作用的常见原因
写了不代表生效，真正在意的是是否被覆盖、是否触达所有节点：
- 只写了
* { box-sizing: border-box; }，但漏了*::before, *::after→ 伪元素仍按content-box渲染，图标/装饰线溢出 - Bootstrap 等框架重置了
box-sizing，但未包含伪元素 → 需手动补全*::before, *::after - 目标元素的 computed 样式里
box-sizing显示为content-box→ 肯定被更高优先级规则覆盖，查 Styles 面板看来源 -
table、td、th默认无视box-sizing→ 必须显式声明才生效
真正容易被忽略的溢出源
它们不报错、不显眼，但上线后第一个被用户截图投诉：
-
html或body上残留了margin或padding（尤其老项目重置不全） - 内联 SVG 带
viewBox和固有宽高，max-width: 100%生效但缩放逻辑和位图不同 - 使用
calc(100% - 20px)时，父容器自身有 padding，减的却是视口宽度，数值对不上 - 移动端 Safari 因硬件加速触发渲染 bug，
max-width: 100%下图片出现 1px 错位或模糊，视觉上像“溢出”
溢出从来不是单点问题，而是多个小疏忽在盒模型、布局上下文、渲染时机上的叠加结果。调试时别盯着 max-width 看，先用 outline 或 document.body.scrollWidth > window.innerWidth 定位真实溢出节点，再逐层查它的 offsetWidth、clientWidth、box-sizing 和子元素行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
