在CSS的布局中，

clear

是一个非常常见的属性，它的作用是控制元素在浮动元素周围的布局。

在使用浮动元素时，可能会面临一个问题，就是浮动元素对周围元素的影响。如果没有正确设置，浮动元素可能会覆盖其他元素或者影响布局的整体效果。这时候，

clear

属性就发挥作用了。

clear

属性有四个可选值，分别是：

left, right, both, none

。默认值为

none

。

如果设置了

clear:left

，则元素不能在其左侧存在浮动元素。同样的，

clear:right

则表示元素不能在右侧存在浮动元素，

clear:both

则表示元素两侧都不允许存在浮动元素。

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

通常，清除浮动的常见方式是使用CSS伪元素（:after）。代码如下：

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
zoom:1;
}

在上面的例子中，我们使用伪元素生成了一个隐藏的块级元素，并利用它的清除浮动的特性来解决布局中的问题。同时，为了兼容IE6/7，我们使用.zoom:1来引发IE的“hasLayout”属性。

总之，在布局中使用浮动元素时，清除浮动是必不可少的。四种清除浮动的方式可以根据实际情况选择使用，清楚浮动能够保证布局的清晰和整洁。