CSS浮动会对原本的布局产生破坏,所以我们会考虑清除浮动产生的影响,本文不谈浮动以及各种清除浮动的方法,只讨论clearfix类和clear清除浮动。
在网页设计中,很常见的一种情况是给内容一个div作为包裹容器,而这个包裹容器不设置高度,而是让里面的内容撑开包裹容器的高度。

<div class="wrapper" >
    <div class="content">
    </div>
</div>

上面content里的内容会把父元素wrapper撑开,但是如果内容区浮动脱离了文档流父元素高度就无法被内容撑开。

<div class="wrapper" >
    <div class="content-left" style="float:left">
    </div>
    <div class="content-right" style="float:right">
    </div>
</div>

在这种情况下为了让父元素高度还能够被子元素撑开,最常见的一种方式就是给父元素添加一个clearfix类

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



<div class="wrapper clearfix" >
    <div class="content-left" style="float:left">
    </div>
    <div class="content-right" style="float:right">
    </div>
</div>

这时候父元素就会被子元素内容撑开高度(尽管子元素浮动了),这时父元素div.wrapper高度是Number.MAX(div.content-left.style.height,div.content-right.style.height)
原理很简单,clearfix类会在wrapper创建一个伪类,并且这个类会清除左右浮动,所以按照布局会在content-leftcontent-right下,而创建的这个伪类是没有脱离文档流的,自然能够撑开父元素wrapper的高度。

从上面代码中我们可以看到.clearfix类用到了

clear:both

clear是css中用来清除浮动的,clear有多个属性值,在项目中常用的是clear:both,这个与clearfix类的区别是.clearfix一般用在浮动元素的父元素上,而clear一般用在浮动元素的平级元素上。

尽管清除浮动的方法有很多,但在项目中常用clearfix类来清除浮动,因为不用添加额外无语义的元素来清除浮动,而且套路固定,容易理解。

clearfix类CSS代码:

clearfix::after
    display: block
    content: "."
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

更多内容请阅读准确理解CSS clear:left/right的含义及实际用途

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐