清除浮动

清除浮动和闭合浮动

区别:清除浮动虽然排版正确,但是,浮动元素的父元素的高度为空;

闭合浮动:闭合浮动后元素高度正确;


清理浮动的各种方法

1、通过在浮动元素的末尾添加一个空的标签,例如:

优点:通俗易懂,容易掌握

缺点:添加更多无意义的标签;后期维护困难;

2、使用
和其自身的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; }.

你可能感兴趣的:(清除浮动)