clearfix清除浮动

要使用clearfix清除浮动，首先了解为什么使用要清除浮动

浮动的缺点

浏览器的浮动通常使用float实现，但使用了float的子元素无法正常撑开父级元素，如下图所示：

父级元素没被撑开会有什么影响，使用一个常见的footer例子来说明

我们可以看到footer的布局方式并不是我们想要让它做的，原因是footer原本的位置被左边的浮动内容给占据，为了让footer置于底部，便需要清除footer两边的浮动，使其不受浮动影响

.footer{
	clear:both;
}

理解清除浮动的原理后，接着用一个例子解释clearfix的作用

<div class="container"><!-- black -->
  <div class = "left">left</div><!-- red -->
  <div class="right">right</div><!-- green -->
 </div>
 <div class="footer">footer</div><!-- blue -->

.container{
	width:500px;
	background-color:black;
}
.left{
	width:200px;
	height:300px;
	background-color:red;
	float:left;
}
.right{
	width:200px;
	height:200px;
	background-color:green;
	float:right;
}
.footer{
	width:400px;
	height:50px;
	background-color:blue;
}
	

执行结果：

我们可以看到，虽然footer在container外部，因为container内部子元素为float，导致container并没有被撑开（图中没有黑色元素显示出来）

如果我们给footer添加clear:both;布局问题可以被解决，但是container依旧没有被撑开，并没有根本解决问题。

要解决此问题，可以给container添加一个类，叫做clearfix，下面是clearfix的实现形式（之一）：

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

添加伪类after，并将其内容设为一个空格，且display样式为block，这是为了在container中占位，来撑开父级元素container，但是我们并不想看到这个多余的内容，所以将其设置为不可见，高为0，字体大小为0。同时设置clear:both清除浮动。

对上面的例子通过伪类:after在container后添加内容（content），来实现清除浮动。

参考自作者Wenliang