浮动导致父容器宽度计算失效并触发横向滚动条，根源在于盒模型溢出（如padding/border未计入width）、HTML空白间隙及高度塌陷；应统一box-sizing:border-box、用display:flow-root触发BFC并精确控制子项宽度。
浮动元素本身不“宽”，但它们会让父容器的宽度计算失效，进而触发横向滚动条——问题不在 float 属性本身，而在你没管住父容器的盒模型、空白间隙和高度坍塌。
检查父容器是否用了 width: 100% 却忽略了 padding/border
这是最隐蔽也最常被忽略的根源。比如父容器写了 padding: 16px，子浮动项又设了 width: 100%，那实际占用宽度就是 100% + 32px，必然横向溢出。
- 用开发者工具选中父容器，看 computed 的
width和scrollWidth，若后者明显更大，基本可锁定是盒模型溢出 - 给所有容器统一加
* { box-sizing: border-box; }，这是防坑第一道防线 - 如果必须留白，别在浮动父容器上直接加
padding，改用margin或嵌套一层内层容器 - 临时加
outline: 1px solid red到父容器，快速确认子项是否真“凸出来”
HTML 换行和空格被渲染成间隙，多个浮动项一排就超宽
浮动块级元素（如 <div>）之间的换行符、缩进空格会被浏览器当作文本节点渲染，产生约 4–8px 的不可见间隙。5 个浮动项，光间隙就能多出 30px+。
- 把父容器设为
font-size: 0，再在每个子元素里重设font-size（如font-size: 14px） - 删掉 HTML 中浮动元素之间的换行和空格——可行但难维护，不推荐
- 直接换用
display: flex：它天然忽略空白字符，flex-wrap: wrap还更可控
浮动未清除导致父容器高度坍塌，间接撑开 body
父容器设了 overflow: auto 或 scroll，但里面全是 float: left 子项且没清除，结果父容器高度算成 0px。浏览器误判内容“堆叠溢出”，连带触发横向滚动条（尤其当基线错位拉高容器时）。
立即学习“前端免费学习笔记（深入）”；
- 优先用
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>——清除动作必须作用于父容器自身 -
overflow: hidden虽能触发 BFC，但会意外裁剪绝对定位内容，慎用
用 overflow-x: hidden 是兜底，不是解法
在 body 或大范围容器上直接写 overflow-x: hidden，看似立竿见影，实则掩盖了真正的布局失控。它不会修复间隙、不会修正盒模型、也不会阻止 JS 动态插入的浮动元素再次撑宽页面。
- 只在明确设计意图是“不可见即不可用”时使用（如轮播图外层容器）
- 避免在
body或html上设置，否则影响可访问性（比如屏幕阅读器用户可能丢失信息） - 真正稳健的组合是：
box-sizing: border-box+ 清除浮动（flow-root或伪元素） + 子项精确宽度控制（不用width: 100%就别加padding）
复杂点在于：很多 UI 库（比如弹窗、下拉菜单）内部动态写 right 或插入浮动元素，你加的 CSS 可能被 JS 覆盖；更麻烦的是 Safari 对包含块宽度的估算偏差，有时 scrollWidth - innerWidth 会返回 15.2px 这种小数，根本查不到对应元素——这时候得靠 outline 全局扫描，而不是盯着某一行代码找。
