清除浮动的方法总结

一、额外标签法:

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

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

<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兼容性问题*/
}