使用:after 伪元素

需要注意的是 :after是伪元素（http://www.w3.org/TR/selectors/#pseudo-elements），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

该方法源自于:http://www.positioniseverything.net/easyclearing.html

原文全部代码如下:

。。。。。。

  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }  .clearfix {display: inline-block;}  /* for IE/Mac */  .clearfix {zoom: 1;/* triggers hasLayout */  display: block;/* resets display for IE/Win */}     鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

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

.clearfix { *zoom:1; }

after伪元素放在浮动元素的外面那层上。