浮动元素宽度总和100%仍出现横向滚动条，主因是父容器box-sizing非border-box导致width:100%不含padding/border、HTML空白字符产生间隙、浮动未清除致父容器高度坍塌、line-height/vertical-align错位撑高容器。
浮动元素宽度加起来是100%还出横向滚动条？检查父容器的padding和border
不是浮动本身“宽”，而是width: 100%算的是父容器的content width，不包含padding和border。比如父容器设了padding: 16px，子元素width: 100%拿到的只是内容区宽度，实际占用却是内容宽 + 32px → 必然溢出。
常见错误现象：导航栏、卡片网格在小屏下突然出现横向滚动条，但开发者工具里每个子项宽度加起来明明是100%。
- 给所有容器统一加
* { box-sizing: border-box; }（必须写在全局重置里，不能只加在子元素上） - 如果父容器必须留白，别用
padding，改用margin或嵌套一层内层容器 - 临时调试时给父容器加
outline: 1px solid red，一眼看出子元素是否真“凸出来”
HTML换行/空格被渲染成间隙，多个浮动项一排就超宽
浮动元素如果是<div>这类块级标签，HTML源码里的换行符、缩进会被浏览器当作空白字符，按当前font-size渲染成约4–8px的间隙。三个浮动项，光间隙就可能多出20px。
使用场景：旧式多列布局、侧边栏+主内容并排、响应式卡片列表。
立即学习“前端免费学习笔记（深入）”；
- 把父容器设为
font-size: 0，再在每个浮动子元素里重设font-size（如font-size: 14px） - 删掉HTML中浮动元素之间的换行和空格（可维护性差，不推荐）
- 直接换用
display: flex——它天然忽略空白字符，且flex-wrap: wrap更可控
浮动未清除导致父容器高度坍塌，间接触发overflow误判
父容器设了overflow: auto或scroll，里面全是float: left子项又没清除浮动，结果父容器计算高度为0px。浏览器一看“内容高度 > 容器高度”，就硬加滚动条——这本是垂直方向问题，但常连带引发横向滚动条误触发（尤其当子项基线错位拉高容器时）。
- 优先用
display: flow-root（Chrome 58+/Firefox 57+/Safari 10.1+） - 兼容老浏览器时，用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; } - 清除必须作用于父容器自身，不能只在子项末尾加
<div style="clear:both"></div>
浮动布局下line-height或vertical-align间接撑高容器
浮动元素默认按baseline对齐。如果子项含文本、图片或行内元素，line-height或vertical-align差异会让它们基线错位，导致父容器被无形拉高——而高度异常又可能影响overflow行为，尤其在配合overflow: hidden或overflow: auto时表现不稳定。
- 给浮动父容器显式设
line-height: 1或font-size: 0（若无文本内容） - 对含图片的浮动项，加
vertical-align: top或vertical-align: middle统一基线 - 检查computed样式中的
line-height和vertical-align值，框架或重置CSS可能已覆盖你的设置
浮动布局的横向滚动条问题，表面看是“宽了”，实则常由盒模型、空白字符、高度坍塌、基线错位四者叠加触发。最易被忽略的是：即使你修复了所有子项宽度，只要父容器没清除浮动，它的高度就不可靠，后续所有尺寸计算都可能失准。
