浅析应用伪类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伪元素闭合浮动)无疑是比较好的解决方案了，它的实现代码如下——

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

　　精益求精方案一——

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

　　精益求精方案二——

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after { 
    clear:both; 
}
/* For IE6/IE7 */
.clearfix { 
    zoom:1; 
}
/* 块级显示 */
.clearfix {
    display: block;
}