浅析应用伪类after闭合浮动

　　很多人都已经习惯称之为清除浮动，但是确切地来说是不准确的。

　　1> 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
　　2> 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

　　通过上图实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。

　　故：用闭合浮动比清除浮动更加严谨，所以应准确称之为：闭合浮动。

　　清理浮动的方式有很多，总结如下——

　　1> 添加额外标签(如<div style="clear: both;"></div>)
　　2> 使用 br标签和其自身的 html属性(如<br clear="all">)
　　3> 父元素设置 overflow：hidden;(或overflow：auto;)及_zoom: 1;
　　4> 父元素也设置浮动
　　5> 父元素设置display:table
　　6> 父元素使用:after 伪元素

　　这六种方式方式各有优缺点，在此就不在说明，相对而言，第6种方式(即after伪元素闭合浮动)无疑是比较好的解决方案了，它的实现代码如下——

 1 /* For modern browsers */
 2 .clearfix:after {
 3     content: ".";           /* 这里的content内容是任意的 */
 4     display: block;　　　　  /* 使生成的元素以块级元素显示,占满剩余空间 */
 5     height: 0;              /* 避免生成内容破坏原有布局的高度 */
 6     visibility: hidden;     /* 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互 */
 7     clear: both;            /* 此行代码才真正做了浮动清除，其他代码无非都是为了隐藏掉content生成的内容 */
 8 }
 9 /* For IE6/IE7 */
10 .clearfix {
11     /* 触发IE6/IE7的布局：可以包含内部浮动的元素 */
12     *zoom: 1;
13     /* 当然还有其他触发IE6/IE7的布局的方式 */
14     /* 比较推荐：*display: inline-block; */
15 }
16 .clearfix {
17     /* 如果触发IE6/IE7布局的方式用的是display: inline-block;的方式，那么可千万别忘了加了这句代码 */
18     display: block;
19     /* 一般闭合浮动均已块级元素呈现，故建议，不管是否用的display: inline-block;的方式触发IE6/IE7的布局，均把这句代码加上 */
20 }

　　精益求精方案一——

 1 /* For modern browsers */        
 2 .clearfix:after {
 3     content: "\200B";    /* Unicode字符里有一个"零宽度空格"，即U+200B，此时可以省略掉 visibility:hidden了 */
 4     display: block;
 5     height: 0;
 6     clear: both;
 7 }
 8 /* For IE6/IE7 */
 9 .clearfix {
10     *zoom: 1;
11 }
12 /* 块级呈现 */
13 .clearfix {
14     display: block;
15 }

　　精益求精方案二——

 1 /* For modern browsers */
 2 .clearfix:before,
 3 .clearfix:after {
 4     content:"";
 5     display:table;
 6 }
 7 .clearfix:after { 
 8     clear:both; 
 9 }
10 /* For IE6/IE7 */
11 .clearfix { 
12     zoom:1; 
13 }
14 /* 块级显示 */
15 .clearfix {
16     display: block;
17 }