浮动布局横向溢出的根源在于html空白间隙、box-sizing未设为border-box、浮动清除失效及移动端根容器溢出，需同步修复font-size:0、box-sizing:border-box、display:flow-root和html{overflow-x:hidden}等。
浮动元素间的HTML空白被渲染成间隙
浮动的 <div> 之间换行或空格，浏览器会当作文本节点处理，生成约 4–8px 的不可见间隙。4 个浮动项一排，光间隙就可能多出 20px+，直接突破视口宽度。<p>常见于旧式导航栏、卡片网格等场景，尤其在小屏下更敏感——你明明设了 <code>width: 25%，却还是横向溢出。
- 临时方案：给父容器加
font-size: 0，再在每个子元素里重设font-size（如font-size: 14px） - 更稳妥做法：改用
display: flex，它天然忽略 HTML 空白，且flex-wrap: wrap更可控 - 不推荐删 HTML 换行——可维护性差，团队协作时极易被格式化工具还原
父容器 padding/border 未计入 width 计算
浮动子项用了 width: 100%，但父容器同时设了 padding: 16px 或 border: 1px solid，实际占用宽度就是 100% + 32px + 2px，必然横向溢出。
开发者工具里看 computed width 和 scrollWidth 差值明显，但样式面板里看不出问题——因为宽度计算“合法”，只是盒模型没对齐。
- 根治方式：全局加
* { box-sizing: border-box; } - 若已用
width: 100%，就别再给父容器加padding或border；要留白，改用margin或嵌套一层内层容器 - 调试时临时加
outline: 1px solid red到父容器，一眼看出子项是否“凸出来”
浮动未清除导致父容器高度坍塌，间接撑开 body
父容器设了 overflow: auto 或默认滚动行为，里面全是 float: left 子项又没清除，结果父容器 height 算成 0px。浏览器误判内容堆叠溢出，连带触发横向滚动条——尤其当子项基线错位、line-height 过大时，会把容器悄悄拉高。
这不是纯视觉问题，而是布局逻辑断裂：浮动脱离文档流后，父容器失去高度锚点，整个结构失稳。
- 现代首选：
display: flow-root（Chrome 58+/Firefox 57+/Safari 10.1+），干净触发 BFC，不裁剪position: absolute内容 - 兼容老浏览器：用伪元素清除
.clearfix::after { content: ""; display: table; clear: both; } - 别只在子项末尾加
<div style="clear:both"></div>——清除动作必须作用于父容器自身
移动端视口宽度被悄悄撑宽
浮动布局本身不关心设备宽度，但它的脆弱性在移动端被放大：一个没设 max-width: 100% 的图片、一个未约束的伪元素、甚至 body 默认的 margin: 8px，都可能让 document.body.scrollWidth > window.innerWidth，而 iOS Safari 的根滚动容器是 html，不是 body。
所以给 body 加 overflow-x: hidden 常失效——它根本没拦住根层溢出。
- 底线配置必须写在
html上：html { overflow-x: hidden; } -
body { margin: 0; }不可省略，浏览器默认外边距在窄屏下直接造成横向滚动 - 所有
img、video、iframe必须配max-width: 100%; height: auto;
浮动布局的横向滚动条问题，本质是多个“看起来合理”的细节叠加失控：盒模型没对齐、空白字符被渲染、高度坍塌未修复、移动端根容器被忽略。单独改一处常无效，得同步堵住这几处漏点。
