浮动导致横向滚动条是因为父容器无法准确计算宽度，常见原因包括box-sizing: content-box与padding、width: 100%组合，或HTML空白字符产生间隙；推荐用display: flow-root创建BFC解决，兼顾兼容性与无副作用。
为什么浮动会让页面多出横向滚动条
不是浮动本身“宽”，而是它让父容器算不准宽度，导致内容悄悄撑出视口。常见组合拳是：box-sizing: content-box + padding + width: 100%，或者 HTML 换行空格被渲染成 4–8px 间隙，几个浮动项一排就超宽。用开发者工具选中父容器，看 scrollWidth 是否明显大于 clientWidth，差值超过 1px 基本就是它。
用 display: flow-root 替代 overflow: hidden
overflow: hidden 虽能触发 BFC 清除浮动，但会裁剪 position: absolute 或 transform 的内容，副作用明显。display: flow-root 是现代解法：它同样创建 BFC，但不改变溢出行为，也不裁剪子元素。
- 直接给浮动父容器加
display: flow-root，无需额外 DOM 或伪元素 - Safari 15.4+ 支持良好；旧版 Safari 或 IE 可降级为
::after { content: ""; display: table; clear: both; } - 别在 body 或 html 上写这个——只作用于真正包含浮动子项的容器
消灭 HTML 空白和盒模型溢出
浮动项之间换行、缩进产生的间隙，和 padding/border 没计入 width，是两大隐形超宽源。
- 全局加
* { box-sizing: border-box; }，这是防坑底线 - 浮动子项别用
width: 100%，改用width: calc(25% - 8px)（示例四列）+margin-right: 8px，最后一项用:last-child { margin-right: 0; } - 真要保留空白结构，父容器设
font-size: 0，每个子项再重设font-size: 14px - 临时调试时，给父容器加
outline: 1px solid red，一眼看出子项是否“凸出来”
别对 body 直接写 overflow-x: hidden
这等于把问题藏起来：JS 动态插入的浮动元素、第三方组件的定位偏移、甚至屏幕缩放变化，都可能再次触发横向滚动。它不修复间隙，不修正盒模型，也不阻止新元素撑宽。
立即学习“前端免费学习笔记（深入）”；
- 只在明确设计意图是“不可见即不可用”的局部容器上使用，比如轮播图外层、弹窗遮罩
- 若必须兜底，优先用
html { overflow-x: hidden; }而非body，避免干扰body的 margin 行为 - 更稳妥的是放弃 float ——用
display: flex或grid，它们天然无视空白、自动包裹、无高度塌陷
最麻烦的其实是那些动态注入的浮动元素，比如某些 UI 库的弹窗或 Tooltip，它们 JS 里写了 right: -10px 却没清理，你加了 flow-root 也拦不住。这种得靠 DevTools 筛选 [style*="right"] 手动揪出来改。
