1. 清除浮动的作用
在 CSS 的布局中，浮动是常见的一种方法，可以使元素脱离文档流，实现多列布局、图文混排等效果。但是，浮动元素会对其他的布局元素产生影响，不当使用会导致页面布局错乱。这时，清除浮动就成了必要的操作。
2. 清除浮动的方法
2.1 空标签法
这种方法比较常见，其主要思路是在浮动元素的父容器最后添加一个空 <div> 标签，并给其设置 clear:both; 属性来清除浮动。如下：
.clearfix::after {
content: "";
display: block;
clear: both;
}
这里的 ::after 是一个 css 伪类，它会在元素的内部最后一个子元素之后插入一个虚拟元素。使用 content: ""; 来为此虚拟元素留出内容区域，然后将其转换为块级元素（display: block;），最后给它添加清除浮动的属性（clear: both;），从而达到清除浮动的效果。
2.2 overflow法
这种方法则是在浮动元素的父容器上添加 overflow:hidden; 或 overflow:auto; 属性，让其产生 BFC（块级格式化上下文），从而实现清除浮动的效果。
.parent {
overflow: hidden;
}
2.3 父容器添加高度
这种方法则是在浮动元素的父容器上添加一个明确的高度值。但这种方法有个缺点就是需要预先知道浮动元素的高度，而且如果浮动元素的高度发生变化，父容器的高度也需要相应地修改。
.parent {
height: 500px;
}
2.4 父容器使用伪类
这种方法与空标签法类似，只是它使用了 css 伪类来实现。在浮动元素的父容器上加上 .clearfix:before, .clearfix:after 两个伪类，并分别设置宽度为 0、高度为 0、溢出为 hidden、内容为 "" 等属性，最后使用 clear:both; 属性清除浮动。
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
2.5 BFC
BFC（块级格式化上下文）是 CSS 中一种盒模型的渲染模式。一个具有 BFC 属性的元素可以隔绝其内部的浮动元素和外部的元素，从而达到清除浮动的效果。比如可以使用 float: left; 和 display: inline-block; 来产生 BFC。
3. 避免造成浮动
以上是清除浮动的几种方法，但是，我们在布局时还要避免造成浮动，从而能更好地避免浮动问题。
3.1 使用 inline-block
inline-block 可以使多个块级元素在同一行内显示，不需要使用 float 浮动。如下构造了一个个并列的块级元素，其中每个元素有一个特定的宽度：
.box {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 20px;
background-color: #ddd;
}
3.2 使用 flex 布局
flex 布局是 CSS3 新增加的布局方式，它非常灵活，可以实现多种复杂的布局效果。使用 flex 布局可以方便地控制元素的排列方向、间距、对齐方式等属性。
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.item {
width: 30%;
height: 200px;
margin-bottom: 20px;
background-color: #ddd;
}
3.3 table 布局
在某些情况下，表格是一种比较合适的布局方式。在使用 table 布局时，我们可以将要实现的内容看作是一张表格，然后使用表格的相关属性来调整布局。
.table {
display: table;
width: 100%;
border-spacing: 10px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 30%;
height: 200px;
background-color: #ddd;
}
4. 总结
清除浮动对于页面布局是非常重要的操作，不仅可以避免一些常见的布局错误，还能让页面更加美观。本文介绍了几种清除浮动的方法，并且讲解了如何避免造成浮动。在实际项目中，我们可以根据自己的实际情况选择合适的方案。