清除浮动的方法总结

一、额外标签法:

             优点:通俗易懂,书写方便.

             缺点:天界了许多无意义的空标签,结构化差.

<div style="clear:both;"></div>

二、给父元素添加overflow属性:

/*给父元素添加 overflow:hidden || auto || scroll;都可实现*/ .clearfix{ overflow:hidden; }

              优点:代码简洁;

              缺点:内容增多的时候,会容易造成不会自动换行,导致内容被隐藏掉,从而无法显示需要的溢出元素.

三、使用after伪元素清除浮动:

              优点:符合闭合浮动思想,结构语义化正确;

              缺点:浏览器兼容性差,IE6-7不支持,需要zoom来触发;content:"."里边尽量跟小点,否则火狐7.0版本中会生成空格.

.clearfix:after{ content:".";/*解决火狐7.0兼容性(双引号中间为空会出现空格)问题*/ display:black; height:0; clear:both; visibility:hidden; } .clearfix{ zoom:1;/*解决IE6-7兼容问题*/ }

四、使用before和after双伪元素清除浮动:

               优点:代码简洁;

               缺点:版本兼容性问题,IE6-7需要zoom来触发.

.clearfix:before,.clearfix:after{ content:".";/*解决火狐7.0兼容性(双引号中间为空会出现空格)问题*/ display:table; } .clearfix:after{ clear:both; } .clearfix{ zoom:1;/*解决IE6-7兼容性问题*/ }