CCS里使用:after伪元素清除浮动

需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。
由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
该方法来自:How To Clear Floats Without Structural Markup

di.jpg

需要注意的是 :after是伪元素(Pseudo-Element),不是伪类(某些CSS手册里面称之为“伪对象”),很多清除浮动大全之类的文章都称之为伪类,不过csser要严谨一点,这是一种态度。
由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
该方法源自于:How To Clear Floats Without Structural Markup
原文全部代码如下

<style type="text/css">

.clearfix:after {

   content: ".";

   display: block;

   height: 0;

   clear: both;

   visibility: hidden;

}

.clearfix {

    display: inline-block;

}  /* for IE/Mac */

</style>

<!–[if IE]>

<style type="text/css">

.clearfix {

    zoom: 1;     /* triggers hasLayout */

    display: block;     /* resets display for IE/Win */

}

</style>

<![endif]–>

复制代码
鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }


复制代码
优点:结构和语义化完全正确,代码量居中
缺点:复用方式不当会造成代码量增加