1. 概述
CSS中 float 属性可以让元素向左或向右浮动，并排在一行中。但是，若浮动元素高度不统一，就会导致下面的元素位置发生偏移，这时我们就需要清除浮动。
清除浮动的方法有很多，本文主要介绍清除浮动常用的一种方法——clear属性。
2. clear属性的作用
clear属性用来清除浮动，其可选值如下：
- none：默认值，不清除浮动
- left：不允许左边有浮动元素
- right：不允许右边有浮动元素
- both：不允许两侧有浮动元素
3. clear属性使用方法
3.1. 为每个需要清除浮动的元素设置 clear 属性
.clearfix::after {
content: "";
display: block;
clear: both;
}
手动为每个需要清除浮动的元素添加.clearfix类，并在CSS中设置 clear 属性。
以上代码是利用伪元素 ::after 的特性在需要清除浮动的元素后面添加空的块级元素，然后利用 clear:both 让该块级元素紧挨在浮动元素下面，从而实现清除浮动的效果。
3.2. 使用类名清除浮动
<div class="clearfix">
<div class="float-left">浮动元素1</div>
<div class="float-right">浮动元素2</div>
</div>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
通过自定义类名来标记需要浮动和清除浮动的元素，然后通过在CSS中定义具体的样式来实现。
4. 注意事项
- 清除浮动一般放在浮动元素的父元素中；
- 使用 ::after 清除浮动要设置 content 属性，否则可能会出现无法清除浮动的情况；
- 在清除浮动时，请注意样式的兼容性，尽可能使用通用的清除浮动方法，并遵循标准规范。
5. 示例
<div class="container">
<div class="float-left">浮动元素1</div>
<div class="float-right">浮动元素2</div>
<div class="clearfix"></div>
</div>
.container {
border: 1px solid #ccc;
}
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: #f0ad4e;
}
.float-right {
float: right;
width: 100px;
height: 200px;
background-color: #428bca;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
效果图如下所示：
6. 总结
本文主要介绍了CSS中清除浮动的一种常用方法——clear属性，以及该属性的使用方法和注意事项。在实际应用中，清除浮动是一个很常用的技巧，希望本文可以对大家学习和使用CSS有所帮助。