清除浮动和闭合浮动
区别:清除浮动虽然排版正确,但是,浮动元素的父元素的高度为空;
闭合浮动:闭合浮动后元素高度正确;
清理浮动的各种方法
1、通过在浮动元素的末尾添加一个空的标签,例如:<div style="clear:both;"></div>
优点:通俗易懂,容易掌握
缺点:添加更多无意义的标签;后期维护困难;
2、使用<br>和其自身的html属性
3、通过设置父元素的overflow:hidden;在IE6中还需要触发 hasLayout ,例如 zoom:1
eg:overflow:hidden; *zoom:1
4、使用:after 伪元素
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
4.1使用伪元素清除浮动的升级版一:
200B:零宽度空格,这个字符基本是不可见的
.clearfix:after {content:"200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.