浮动元素脱离文档流导致父容器高度塌陷，无法包裹子元素。设置 overflow: hidden 或 auto 可触发BFC，使父容器包含浮动元素，解决布局错乱问题。其中 hidden 隐藏溢出内容，auto 在需要时显示滚动条。相比 clear: both 和 :after 伪元素，display: flow-root 是现代推荐方案，无额外副作用，适合新项目；而 overflow 方法兼容性好，适用于旧项目维护。
当CSS浮动元素溢出父容器时，会导致布局错乱，比如父元素无法正确包裹子元素的高度。这个问题的常见解决方法是通过设置父容器的 overflow 属性为 hidden 或 auto，从而触发BFC（块级格式化上下文），让父容器包含内部的浮动元素。
为什么浮动元素会溢出父容器？
当子元素设置了 float: left 或 float: right 时，它会脱离正常的文档流，导致父容器“塌陷”——即父元素高度计算不包含浮动子元素，看起来就像内容溢出了。
使用 overflow: hidden 解决溢出问题
给父容器添加 overflow: hidden 可以强制其生成BFC，从而包含内部浮动元素。
- 简单有效，兼容性好
- 适用于不需要显示溢出内容的场景
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
overflow: hidden; /* 包含浮动子元素 */
}
.child {
float: left;
}
使用 overflow: auto 作为替代方案
与 hidden 类似，overflow: auto 同样可以触发BFC。不同的是，当内容超出容器时，浏览器会自动添加滚动条。
- 适合不确定内容长度的情况
- 避免隐藏重要溢出内容
其他清除浮动的方法对比
虽然 overflow 是常用方法，但还有其他方式也能解决该问题：
- clear: both：在浮动元素后加一个空元素并设置 clear，结构不优雅
- :after 伪元素清除：通过CSS插入元素清除浮动，更语义化
- display: flow-root：现代推荐方式，直接创建BFC，无副作用
基本上就这些。使用 overflow: hidden 或 auto 是快速解决浮动溢出的有效手段，尤其适合旧项目维护。但在新项目中可优先考虑 display: flow-root 来实现更干净的布局包含。
