CSS响应式页面中浮动布局如何避免横向滚动

浮动元素间空白间隙、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+，直接撑破视口。

常见于旧导航栏、卡片网格等场景，小屏下尤其明显。

1. 临时解法：.parent { font-size: 0; }，再给每个子元素设 font-size: 14px（或具体字号）
2. 更稳妥做法：改用 display: flex —— 它天然忽略 HTML 空白，flex-wrap: wrap 也比浮动可控得多
3. 别删 HTML 换行：格式化工具会自动还原，团队协作时极易出问题

box-sizing 未设为 border-box 导致宽度计算失控

width: 100% 默认基于 content box 计算，但父容器若有 padding: 16px 或 border: 1px，实际宽度就是 100% + 32px + 2px，必然横向溢出。

开发者工具里看 computed width 和 scrollWidth 差值明显，但样式面板里看不出异常——因为“计算合法”，只是盒模型没对齐。

1. 根治方式：全局加 * { box-sizing: border-box; }，务必放在 CSS 最顶部
2. 若已用 width: 100%，就别再给父容器加 padding 或 border；要留白，改用 margin 或嵌套一层内层容器
3. 调试时可临时加 outline: 1px solid red 到父容器，一眼看出子项是否“凸出来”

浮动未清除引发父容器坍塌，间接撑开 body

父容器没清除浮动，height 算成 0px，浏览器误判内容堆叠溢出，连带触发横向滚动条——尤其当子项基线错位、line-height 过大时，会悄悄把容器拉高。

1. 避免用 overflow: hidden 清浮动：它会触发 BFC，若父容器有 height 或 max-height 限制，反而强制出现滚动条
2. 推荐用 .clearfix::after：content: "" + display: table + clear: both，不依赖尺寸重排，无副作用
3. 现代首选是 display: flow-root：专为包裹浮动设计，创建 BFC 但不裁剪内容、不触发滚动条

移动端 Safari 对 overflow-x: hidden 的特殊处理

iOS Safari 在 html 或 body 上设 overflow-x: hidden 常常无效，尤其在 input 聚焦、键盘弹出或缩放后——这不是 bug，是 WebKit 渲染策略。

1. 绕过方法：不要对 html 或 body 直接设 overflow-x: hidden，改用固定高度的 wrapper 容器
2. 配合 touch-action: pan-y 阻止横向拖拽
3. 必须锁屏时，用 JavaScript 监听 scroll 并调用 preventDefault()，注意 iOS 16+ 需设 { passive: false }

真正要控制的是内容流本身，不是靠隐藏滚动条掩盖问题。浮动布局在移动端本就脆弱，修复间隙、盒模型和清除逻辑，比反复试 overflow 更可靠。