CSS中的clear属性是一个常用的属性，用来控制在元素旁边浮动的元素对该元素的影响。

.clearfix {
clear: both;
}

通常在布局中，我们会使用浮动（float）来实现元素的排列，但是浮动会对下面的元素带来一定的影响。当一个元素正常流（normal flow）中的某个元素浮动后，它周围的元素会发生上跟下的位置错乱。这时我们可以使用clear属性将其还原回来。

img {
float: left;
margin-right: 10px;
}
.clear {
clear: both;
}

可以看到上面的代码，我们在img标签中设置了float: left，让图片元素左浮动，并设置了一个外边距。但是如果我们下面继续排列文字，文字就会出现问题。这时我们可以在下面文字的标签上添加一个.clear的类，然后设置clear: both来解决上述问题。

除了both，clear属性还有left和right等选项。left用来解决左侧元素浮动影响，right用来解决右侧元素浮动影响。但是注意，不建议大量使用clear属性，它会降低网页的性能。

.left-float {
float: left;
}
.right-float {
float: right;
}
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}

上面的代码中，我们设置了.left-float和.right-float分别左右浮动。如果下面还有元素紧接着排列的话，可以使用.clear-left和.clear-right来进行清除浮动。