浮动布局在移动端触发横向滚动条，根本原因是盒模型、HTML空白间隙和高度坍塌三类问题在小屏下被放大；临时解法包括font-size:0、box-sizing:border-box和display:flow-root，根治方案是改用flex布局。
浮动布局在移动端触发横向滚动条，不是因为 float 本身“错”，而是它暴露并放大了盒模型、空白间隙和高度坍塌三类问题——这些问题在桌面端可能被视口宽度掩盖，在小屏下立刻变成溢出。
HTML 换行与空格被渲染成不可见间隙
浮动的 <div> 之间只要存在换行或缩进空格，浏览器就当作文本节点处理，生成约 4–8px 的间隙。4 个 width: 25% 的子项，光间隙就可能多出 20px+，直接突破 100% 视口宽度。
- 临时解法：
.float-container { font-size: 0; }+ 每个子元素重设font-size（如font-size: 14px） - 根治建议：改用
display: flex，它天然忽略 HTML 空白，且flex-wrap: wrap更可控 - 别删 HTML 换行——格式化工具会自动还原，协作时极易出错
父容器 padding/border 未计入 width 计算
浮动子项设了 width: 100%，但父容器同时有 padding: 16px 或 border: 1px，实际占用宽度就是 100% + 32px + 2px，必然横向溢出。开发者工具里 computed width 和 scrollWidth 差值明显，但样式面板看不出异常。
- 全局加
* { box-sizing: border-box; }是最有效的预防手段 - 若已用
width: 100%，就别再给父容器加padding或border；要留白，改用margin或嵌套一层内层容器 - 调试时临时加
outline: 1px solid red到父容器，一眼看出子项是否“凸出来”
浮动未清除导致父容器高度坍塌，间接撑开 body
父容器没清除浮动，height 算成 0px，浏览器误判内容堆叠溢出，连带触发横向滚动条——尤其当子项基线错位、line-height 过大时，会悄悄把容器拉高。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
display: flow-root触发 BFC，比overflow: hidden更安全（后者会裁剪绝对定位内容） - 兼容老浏览器时，用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; } -
overflow-x: hidden只能兜底，不能修复根本问题；在body或html上滥用，会掩盖 JS 动态插入浮动元素后再次撑宽的问题
真正难定位的往往是第三方组件偷偷加了 white-space: nowrap，或字体加载时 layout shift 导致的瞬时溢出——这类问题得靠逐层加 overflow-x: hidden 缩小范围，再结合 getComputedStyle(document.body).width 和 window.innerWidth 对比确认。
