CSS万能闭合代码

.clearfix:after{
 content:".";
 display:block;
 height:0;
 line-height:0;
 clear:both;
 visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix{display:block;}
/* End hide from IE Mac */
/* end of clearfix */

 

例子：

<div style="border:2px solid red;">
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

大家可以看到，作为外部容器的边框为红色的DIV，没有被撑开。这是因为内部的DIV因为float:left之后，就丢失了clear:both和 display:block的样式，所以外部的DIV不会被撑开。

此时给外围div加一个clearfix的class便可以解决

这篇文章也不错