overflow: auto触发滚动条是因为浮动导致父容器高度坍缩为0，浏览器误判内容溢出；清除浮动必须作用于父容器，如display: flow-root或clearfix伪元素；现代布局应直接改用flex/grid。
为什么overflow: auto会让浮动布局突然出现滚动条
滚动条不是因为内容真的溢出，而是父容器高度坍缩后被浏览器误判为“内容撑不开容器”。浮动元素脱离文档流，父容器height算出来是0px，但又设置了overflow: auto——浏览器一看：“高度为0，内容却有东西”，就强行加滚动条。常见于导航栏、卡片列表、侧边栏等老式float布局。
清除浮动必须作用在父容器上，而不是随便加个clear: both
clear: both本身不解决塌陷，它只控制“当前块级元素的位置”，对父容器高度毫无影响。把clear: both写在子元素里、写在footer上、甚至写在浮动元素自己身上，都无效。
- 正确做法：让父容器自身建立BFC，例如加
display: flow-root - 兼容老项目：用伪元素
.clearfix::after { content: ""; display: table; clear: both; }，并确保该类名加在父容器上 - 禁用
overflow: hidden——它虽能触发BFC，但会裁剪box-shadow、遮挡下拉菜单、干扰position: fixed元素
浮动宽度总和=100%还出滚动条？检查这些隐性尺寸
即使所有float子项的width加起来正好100%，仍可能因以下原因横向或垂直溢出：
-
border和padding没计入宽度假设（box-sizing: content-box默认行为）→ 全局加* { box-sizing: border-box; } - HTML中浮动元素之间有换行或空格 → 渲染器插入约
4px间隙，用font-size: 0或删空格解决 -
vertical-align设为baseline（默认值）时，不同行高文字基线不齐，间接拉高容器 → 改为vertical-align: top或统一line-height
现代项目里，别修float，直接切到flex或grid
你花半小时调overflow、clear、box-sizing，不如三行CSS重写布局：
立即学习“前端免费学习笔记（深入）”；
- 横排卡片：
ul { display: flex; flex-wrap: wrap; }+li { flex: 1 1 calc(25% - 8px); } - 响应式栅格：
ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))); } - 迁移后，
scroll相关错位基本消失——因为flex/grid天然不塌陷，也不依赖清除逻辑
最容易被忽略的是：滚动条只在某个缩放比例或设备宽度下才出现，这时候别急着改媒体查询，先确认父容器是否还在用float——工具用错了，补丁越打越偏。
