浮动元素撑不满父容器时滚动条意外出现的直接原因是父容器设置overflow: auto/scroll且未清除浮动，导致高度坍塌被误判为内容溢出；需用clearfix、display: flow-root等方法建立BFC清除浮动。
浮动元素撑不满父容器时滚动条意外出现
直接原因通常是父容器设置了 overflow: auto 或 overflow: scroll，而浮动子元素未清除，导致父容器高度坍塌——视觉上内容“溢出”了，浏览器就硬加了滚动条。
这不是宽度超了，是高度计算失效后触发的误判。常见于导航栏、卡片列表、侧边栏等用 float 实现的旧式布局中。
- 别急着调
width或max-width，先确认父容器是否“没高度” - 用浏览器开发者工具检查父容器的实际
height，经常是0px - 清除浮动必须作用在父容器上，而不是某个子元素末尾随便加个
<div style="clear:both"></div>
清除浮动的三种可靠写法（按推荐顺序）
不是所有清除方式都等效。现代项目优先选不影响 DOM 结构、不引入冗余标签的方法。
-
::after伪元素清除（推荐）：给父容器加class="clearfix"，配合 CSS 规则.clearfix::after { content:""; display:table; clear:both; } -
overflow: hidden（慎用）：能强制包含浮动，但会裁剪position: absolute溢出或box-shadow投影，且在 Flex/Grid 布局中可能干扰对齐 -
display: flow-root（最干净）：单行声明即可建立 BFC，完全隔离浮动影响，Chrome 58+ / Firefox 57+ / Safari 10.1+ 支持，IE 不支持
浮动宽度总和 = 100% 还出滚动条？检查这些隐性尺寸
即使 float: left 的几个 div 宽度加起来正好是 100%，也可能因以下原因横向溢出：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
padding或border，但子元素宽度没减去这部分（比如设了width: 100%而不是box-sizing: border-box） - 浮动元素之间存在空白字符（换行/空格），被渲染为
font-size对应的间隙，尤其在inline-block混用时更明显 - 某些字体下，
line-height或vertical-align会让浮动元素基线错位，间接拉高容器高度，触发垂直滚动条
快速验证：临时给父容器加 outline: 1px solid red，再对比子元素实际占位框，常能一眼看出溢出点。
为什么现在还碰浮动 + 滚动条问题？
多数是维护老项目，或对接遗留 CMS 模板（比如 WordPress 主题仍大量用 float 做两栏布局）。新项目用 Flex 或 Grid 几乎不会遇到这类问题，因为它们天然不坍塌、不依赖清除。
但只要还在用 float，就必须记住：浮动本身不参与文档流高度计算，任何依赖父容器自动包裹内容的场景，都得显式处理 BFC 或清除逻辑——这点容易被忽略，尤其当滚动条只在某个分辨率下才出现时，更容易当成响应式 bug 去调媒体查询，而不是回溯布局模型本身。
