当先锋百科网

首页 1 2 3 4 5 6 7

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来进行清除浮动。