清除浮动是为了解决父容器因子元素脱离文档流导致的高度塌陷问题。使用 overflow: auto 可触发BFC，使父容器包含浮动子元素，从而恢复正常布局，适用于两栏布局、卡片列表等场景，且无需额外标签，但需注意可能引发滚动条；现代布局建议采用Flexbox或Grid替代浮动。
当使用浮动（float）布局时，父容器常常无法正确包裹子元素，导致布局错乱或内容被遮挡。解决这个问题的核心方法之一是清除浮动。其中，overflow: auto 是一种简单有效的解决方案。
为什么需要清除浮动？
浮动元素会脱离正常的文档流，父容器在计算高度时会忽略这些子元素，造成“塌陷”。这可能导致后续内容上移、覆盖浮动区域，影响页面结构。
使用 overflow: auto 清除浮动的原理
给父容器设置 overflow: auto 或 overflow: hidden 可以触发BFC（块级格式化上下文），使父元素形成一个独立的渲染区域，从而包含内部的浮动子元素。
这种方法不需要额外标签，代码简洁：
立即学习“前端免费学习笔记（深入）”；
.container {
overflow: auto;
}
.float-left {
float: left;
}
实际应用场景示例
假设有一个两栏布局：左侧图片浮动，右侧为文字说明。
- 如果不处理浮动，父 div 高度可能为0，边框或背景无法正常显示
- 添加 overflow: auto 后，父容器自动包裹浮动内容，布局恢复正常
- 特别适用于卡片、新闻列表等常见模块
注意事项与替代方案
虽然 overflow: auto 使用方便，但需注意：
- 如果内容超出容器，可能会出现滚动条，建议根据设计需求选择是否使用
- 在某些情况下可用 clearfix 技术作为更精确的控制方式
- 现代布局推荐使用 Flexbox 或 Grid，从根本上避免浮动带来的问题
基本上就这些。对于旧项目中的浮动布局，overflow: auto 是快速修复的有效手段，简单又可靠。
