overflow清除浮动的原理是触发BFC，使父容器包含浮动子元素；常用hidden（简洁但裁剪溢出）、auto（安全推荐）、scroll（不推荐）；现代可用display:flow-root或伪元素clear:both。
当元素设置了 float，它会脱离普通文档流，导致父容器高度塌陷——也就是“父元素包不住浮动子元素”。解决这个问题的关键，不是强行给父元素写死高度，而是让父容器“感知”到浮动子元素的存在。利用 overflow 是一种经典且简洁的清除浮动方式。
overflow 清除浮动的原理
给父容器设置 overflow（如 hidden、auto 或 scroll），会触发该元素生成一个新的 块级格式化上下文（BFC）。而 BFC 的一个特性是：内部的浮动元素参与其高度计算，不会造成父容器塌陷。
-
overflow: hidden最常用，简洁有效，但要注意内容溢出会被裁剪 -
overflow: auto在必要时才出现滚动条，更安全，推荐在不确定内容高度时使用 -
overflow: scroll强制显示滚动条（即使不需要），一般不用于清浮动
实际写法示例
假设有如下 HTML：
<div class="container"><div class="box" style="float: left;">左浮</div>
<div class="box" style="float: right;">右浮</div>
</div>
只需给 .container 加上：
立即学习“前端免费学习笔记（深入）”；
.container { overflow: hidden; }
父容器就能正确包裹两个浮动子元素，高度不再为 0。
注意事项与替代方案
虽然 overflow 清浮动简单高效，但需留意副作用：
- 若父容器本应允许内容溢出（比如下拉菜单、tooltip 等），
hidden会把它们截掉 - 某些旧版浏览器对
overflow触发 BFC 的兼容性略差（IE6/7 需配合zoom: 1）
现代开发中，也可考虑：
-
display: flow-root—— 专为创建 BFC 设计，无溢出副作用，兼容性已较好（Chrome 64+/Firefox 59+/Edge 17+） -
::after伪元素 +clear: both—— 兼容性最强的传统方案
