[分享]css中clear both的作用

在CSS中，clear both是一种非常有用的属性，它可以用来控制浮动元素对父元素的影响。当一个元素浮动时，它会让父元素的高度自动失效，导致父元素难以包裹它。使用clear both属性可以解决这个...

在CSS中，clear both是一种非常有用的属性，它可以用来控制浮动元素对父元素的影响。当一个元素浮动时，它会让父元素的高度自动失效，导致父元素难以包裹它。使用clear both属性可以解决这个问题。

.clearfix {
    clear: both;
} 

上面的代码展示了一个clearfix类，它使用了clear both属性来清除浮动。 在HTML中，只需要给父元素添加clearfix类，就可以使父元素包裹浮动子元素。

clear both属性有两种常见的表示方式，分别是clear:both和clear:both。

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
} 

以上代码展示了另外一种实现clearfix的方式。它使用了:before和:after伪元素。通过这种方式，可以实现浏览器兼容性更好的clearfix。

总的来说，clear both属性是CSS中非常有用的属性之一。掌握它的使用方法，可以有效地解决浮动元素对父元素的影响问题。