根本原因是父容器宽度被超宽子元素撑开，overflow: hidden 仅隐藏溢出内容而不约束布局宽度；须同时触发 bfc 并限制子元素横向扩张（如 max-width: 100%、overflow-wrap: break-word）。
为什么父容器设了 overflow: hidden 还有水平滚动条？
根本原因不是浮动没清除，而是父容器宽度被子元素撑开——特别是当浮动元素本身超宽（比如图片未设 max-width）、或父容器用了 white-space: nowrap、或存在未换行的长单词/URL 时。overflow: hidden 只隐藏溢出内容，不改变布局尺寸计算，浏览器仍按“本该显示的宽度”算出父容器实际宽度，从而触发水平滚动。
真正有效的清除浮动 + 宽度约束组合方案
单靠 overflow 属性治标不治本。必须同时解决两个问题：让父容器正确包裹浮动子元素（BFC 触发），并主动限制其内部内容的横向扩张能力。
- 给父容器加
overflow: hidden或overflow: auto—— 目的是创建 BFC，使父容器能包含浮动子元素高度和宽度（注意：IE6/7 需用zoom: 1） - 对浮动子元素本身加约束：
max-width: 100%（尤其图片、视频）、word-break: break-word或overflow-wrap: break-word（防长单词撑宽） - 避免在父容器上设固定
width或min-width，否则可能和overflow冲突；优先用width: 100%或不设宽
float 元素内联文本导致的意外溢出
常见于浮动的 <div> 里放了一长串无空格 URL 或十六进制哈希值，即使父容器已清浮，文本仍会强行拉宽容器。此时 <code>overflow: hidden 仅裁剪，不折行。
- 必须加
word-break: break-all（粗暴但有效）或更安全的overflow-wrap: break-word - 如果该容器还用了
display: inline-block，记得补vertical-align: top，否则基线对齐可能引入额外空白，间接影响宽度计算 - 不要依赖
white-space: normal的默认行为——某些字体或渲染引擎下它仍可能不折长单词
现代替代方案：为什么该考虑放弃 float 布局
float 本就不是为整体布局设计的，它的溢出问题本质是历史包袱。Flexbox 和 Grid 天然不产生此类问题，且控制力更强。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex替代浮动排列：子项默认不撑宽父容器，flex-wrap: wrap自动换行，无需清浮 - 若必须兼容老浏览器（如 IE10），
display: table-cell比float更稳定，也不触发横向溢出 - 真要保留
float（比如图文混排场景），务必把所有可能超宽的内容（<img alt="CSS如何防止浮动元素导致的水平滚动条_通过父容器overflow设置约束css" >、<pre class="brush:php;toolbar:false;"></pre>、<code>）单独加max-width: 100%和overflow-x: auto
overflow: hidden，只要里面有一张没设 max-width 的图，或一段没断行的 token，它就还在那儿等着。
