浮动宽度总和=100%仍出横向滚动条，主因是父容器padding/border未被减去、html空白字符产生间隙、未清除浮动导致高度坍塌及基线错位撑高容器，需统一box-sizing:border-box、消除空白、用flow-root清除浮动并检查line-height。
浮动元素宽度加起来是100%还出横向滚动条？检查父容器padding和border
不是浮动本身“宽”，而是你没把父容器的内边距和边框算进去。比如父容器设了padding: 16px，子元素却用width: 100%，那实际占用宽度就是100% + 32px——必然横向溢出。
常见错误现象：导航栏、卡片网格在小屏下突然出现横向滚动条，但开发者工具里看不出明显超宽元素。
实操建议：
- 给所有容器统一加
box-sizing: border-box（推荐写在* { box-sizing: border-box; }） - 如果已用
width: 100%，就别再给父容器加padding或border；要留白，改用margin或内部嵌套一层 - 临时加
outline: 1px solid red到父容器，对比子元素是否真“凸出来”
浮动项之间有空格？HTML换行符会被渲染成间隙
浮动元素如果是块级标签（如div），HTML源码里换行或缩进会生成一个空白字符，被浏览器按当前font-size渲染成约4–8px的间隙。多个浮动项一排，这点间隙累加就可能超宽。
使用场景：旧式多列布局、侧边栏+主内容并排、响应式卡片列表。
实操建议：
- 把父容器
font-size: 0，再在每个浮动子元素里重设font-size（如font-size: 14px） - 删掉HTML中浮动元素之间的换行和空格（不推荐，可维护性差）
- 直接换用
display: flex——它天然忽略空白字符，且flex-wrap: wrap更可控
浮动未清除导致父容器高度坍塌，触发overflow误判
父容器设了overflow: auto或scroll，但里面全是float: left子项，又没清除浮动，结果父容器height算出来是0px。浏览器一看“内容高度 > 容器高度”，就硬加滚动条——这是垂直方向问题，但常连带引发横向滚动条误触发（尤其当子项基线错位拉高容器时）。
性能影响：清除方式不当会强制重排，overflow: hidden最轻量但会裁剪position: absolute内容；display: flow-root最干净，但IE不支持。
实操建议：
- 优先用
display: flow-root（Chrome 58+/Firefox 57+/Safari 10.1+） - 兼容老浏览器时，用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; } - 别只在子项末尾加
<div style="clear:both"></div>——清除必须作用于父容器自身
浮动布局下vertical-align或line-height间接撑高容器
浮动元素默认按baseline对齐，如果子项含文本、图片或inline内容，line-height或vertical-align会让它们基线错位，导致父容器高度被意外拉高。高度异常后，配合overflow: auto，浏览器可能误判为“内容溢出”，进而添加滚动条（尤其是垂直滚动条，但视觉上常连带影响水平布局流）。
容易踩的坑：给浮动子项设vertical-align: top没用——它只对inline和table-cell生效；浮动元素是块级，vertical-align被忽略。
实操建议：
- 浮动子项统一加
vertical-align: top无效，改用display: inline-block配合vertical-align，或直接上flex - 临时加
line-height: 1和font-size: 0看是否消失，确认是不是文本行高惹的祸 - 用开发者工具检查浮动子项的
computed height和line-height，比对父容器实际height
横向滚动条在浮动布局里很少是单一原因，往往是box-sizing + 空白字符 + 未清除浮动三者叠加的结果。调试时别只盯着width，先用outline扫一遍，再逐个关掉可疑CSS规则——最容易被忽略的是父容器那8px默认margin和HTML换行带来的像素级间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
