BFC是块级格式化上下文，通过设置父容器overflow为hidden或auto可触发BFC，使其包含浮动子元素，从而清除浮动影响。
在CSS中，使用 overflow 清除浮动是一种常见且有效的清除浮动影响的方法。当一个容器内部的子元素设置了浮动（float），它会脱离正常的文档流，导致父容器无法正确包裹这些浮动元素，从而可能引发布局问题。通过给父容器设置 overflow 属性，可以触发BFC（块级格式化上下文），让父元素形成一个独立的渲染区域，进而包含其内部的浮动子元素。
什么是BFC？
BFC（Block Formatting Context）是Web页面中一个独立的渲染区域，其中的元素布局不受外部元素影响，同时也能包含内部的浮动元素。设置 overflow 为非 visible 值（如 hidden 或 auto）会触发BFC，从而实现清除浮动的效果。
如何用 overflow 清除浮动
只需要给包含浮动元素的父容器添加以下CSS样式即可：
.container {
overflow: hidden; /* 或 overflow: auto */
}
例如：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div style="float: left; width: 100px; height: 100px; background: red;"></div> <div style="float: right; width: 100px; height: 100px; background: blue;"></div> </div>
此时，如果 .container 没有设置高度或清除浮动，它将“塌陷”。加上：
.container {
overflow: hidden;
}
父容器就会正确包裹两个浮动子元素，高度恢复正常。
overflow 的可选值及其效果
- overflow: hidden：内容超出时被裁剪，能有效触发BFC，是最常用的清除浮动方式之一。
- overflow: auto：内容超出时出现滚动条，也能触发BFC，适合不确定内容高度的场景。
- overflow: visible：默认值，不会触发BFC，无法清除浮动。
注意事项
虽然 overflow 方法简单有效，但需注意：
- 设置
overflow: hidden可能会意外裁剪掉定位超出容器的内容（如绝对定位元素或下拉菜单）。 - 若容器内有需要显示的溢出内容，建议使用
overflow: auto或考虑其他清除浮动方法，如伪元素法（::after）。
基本上就这些。使用 overflow 清除浮动不复杂，但在实际项目中要结合布局需求谨慎选择，避免带来新的显示问题。
