clearfix

  .clearfix:before,
  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
  }
  .clearfix:after {clear: both;}
  .clearfix {zoom: 1;} /* IE < 8 */

其实只使用clearfix:after就可以达到清除浮动的效果，但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，具体造成这种原因，大家可以浏览Thierry Koblentz写得《Everything you Know about Clearfix is Wrong》你要是对此问题感兴趣的话，你还可以查看这个DEMO。所以为了让浏览器兼容这个clearfix的清除浮动，在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题，我在这里只是简单介绍了一下，如果你对这个clearfix更感兴趣，你可以在本地对他进行拆解，加强自己对他的深一层理解。

针对clearfix的清除浮动Nicolas在《Better float containment in IE using CSS expressions》中介绍了一种更简单的清除浮动的方法：
 .clearfix:before,
   .clearfix:after {
      content:"";
      display:table;
   }
   .clearfix:after {
     clear:both;
     overflow:hidden;
   }
  .clearfix {
     zoom:1; /* IE < 8 */
  }

在这么多种清除浮动的方法中，都没有离开最原始的clear:both方法，特别是clearfix:after清除浮动，完全就是clear:both的一种变身，区别在于不需要在html增加一个标签，而只需要在有浮动元素的父元素中加上一个clearfix的class名，这样就轻松解决了清除浮动的问题。但在IE6-7下面，我们只要触发子hasLayout的元素就可以清除浮动了，常见的就是zoom:1。(有关于hasLayout的更详细东西可以点击这里)
本文链接：http://www.w3cplus.com/css/clear-float