浅谈clearfix类和clear清除浮动

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-left，content-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的含义及实际用途