清除浮动可解决父容器高度塌陷问题，常用方法包括clear属性和伪元素法。1. 使用clear:both在浮动元素后添加空标签实现清除，但影响语义化；2. 推荐使用伪元素::after结合clearfix类，通过content、display:block和clear:both清除浮动，无额外标签且兼容性好；3. 其他方法如overflow:hidden触发BFC、采用Flex/Grid布局等也可闭合浮动，其中伪元素法为现代开发首选方案。
当元素使用 float 属性进行浮动时，可能会导致父容器无法正确包裹子元素，出现高度塌陷等问题。为解决这一问题，CSS 提供了多种清除浮动的方法。以下是常用的几种方式，重点介绍 clear 属性 和 伪元素清除法。
1. 使用 clear 属性清除浮动
clear 属性用于指定一个元素的哪一侧不允许有浮动元素。它可以应用在块级元素上，防止其与前面的浮动元素并排显示。
常用取值包括：- clear: left — 左侧不允许浮动元素
- clear: right — 右侧不允许浮动元素
- clear: both — 两侧都不允许浮动元素（最常用）
例如，在浮动元素之后添加一个空的块级元素，并设置 clear: both：
左浮动右浮动
这种方法简单直接，但会引入无意义的 HTML 标签，不利于语义化。
立即学习“前端免费学习笔记（深入）”；
2. 使用伪元素清除浮动（推荐）
通过 ::after 伪元素结合 clear 属性，可以在不增加额外标签的情况下清除浮动，是现代开发中最推荐的方式。
常见写法如下：
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
zoom: 1; /* 兼容 IE6/7 */
}
将 clearfix 类应用在包含浮动元素的父容器上，即可有效闭合浮动，避免高度塌陷。
其中：
- content: "" — 必须存在，否则伪元素不会生效
- display: block — 确保伪元素为块级
- clear: both — 清除两侧浮动
- height: 0; visibility: hidden — 隐藏元素但保留清除效果
- zoom: 1 — 触发 IE 的 hasLayout 机制，兼容老版本浏览器
3. 其他清除浮动方法
除了上述主流方法，还有一些替代方案：
- 给父元素设置 overflow: hidden — 可形成 BFC（块格式化上下文），自动包含浮动子元素，但可能裁剪溢出内容
- 使用 Flex 或 Grid 布局 — 现代布局方式天然不依赖浮动，从根本上避免问题
- 父元素也设为浮动 — 不推荐，会导致问题向上传递
基本上就这些。在实际项目中，伪元素 + clearfix 是最干净、兼容性好的解决方案。随着 CSS 布局的发展，虽然浮动使用减少，但在旧项目维护或特定场景中，掌握清除浮动的方法依然必要。
