浮动元素间空白间隙、box-sizing未设为border-box、浮动未清除及iOS Safari对overflow-x:hidden的限制是导致HTML横向溢出的四大主因，需分别用font-size:0/flex布局、全局box-sizing:border-box、clearfix/flow-root及wrapper+touch-action方案根治。
浮动元素间空白间隙导致溢出
HTML里换行或空格会被浏览器当成文本节点，生成 4–8px 间隙。4 个 float: left 元素各占 width: 25%，光间隙就可能多出 20px+，直接撑破视口。
常见于旧导航栏、卡片网格等场景，小屏下尤其明显。
- 临时解法：
.parent { font-size: 0; }，再给每个子元素设font-size: 14px（或具体字号） - 更稳妥做法：改用
display: flex—— 它天然忽略 HTML 空白，flex-wrap: wrap也比浮动可控得多 - 别删 HTML 换行：格式化工具会自动还原，团队协作时极易出问题
box-sizing 未设为 border-box 导致宽度计算失控
width: 100% 默认基于 content box 计算，但父容器若有 padding: 16px 或 border: 1px，实际宽度就是 100% + 32px + 2px，必然横向溢出。
开发者工具里看 computed width 和 scrollWidth 差值明显，但样式面板里看不出异常——因为“计算合法”，只是盒模型没对齐。
立即学习“前端免费学习笔记（深入）”；
- 根治方式：全局加
* { box-sizing: border-box; }，务必放在 CSS 最顶部 - 若已用
width: 100%，就别再给父容器加padding或border；要留白，改用margin或嵌套一层内层容器 - 调试时可临时加
outline: 1px solid red到父容器，一眼看出子项是否“凸出来”
浮动未清除引发父容器坍塌，间接撑开 body
父容器没清除浮动，height 算成 0px，浏览器误判内容堆叠溢出，连带触发横向滚动条——尤其当子项基线错位、line-height 过大时，会悄悄把容器拉高。
- 避免用
overflow: hidden清浮动：它会触发 BFC，若父容器有height或max-height限制，反而强制出现滚动条 - 推荐用
.clearfix::after：content: ""+display: table+clear: both，不依赖尺寸重排，无副作用 - 现代首选是
display: flow-root：专为包裹浮动设计，创建 BFC 但不裁剪内容、不触发滚动条
移动端 Safari 对 overflow-x: hidden 的特殊处理
iOS Safari 在 html 或 body 上设 overflow-x: hidden 常常无效，尤其在 input 聚焦、键盘弹出或缩放后——这不是 bug，是 WebKit 渲染策略。
- 绕过方法：不要对
html或body直接设overflow-x: hidden，改用固定高度的 wrapper 容器 - 配合
touch-action: pan-y阻止横向拖拽 - 必须锁屏时，用 JavaScript 监听
scroll并调用preventDefault()，注意 iOS 16+ 需设{ passive: false }
真正要控制的是内容流本身，不是靠隐藏滚动条掩盖问题。浮动布局在移动端本就脆弱，修复间隙、盒模型和清除逻辑，比反复试 overflow 更可靠。
