清除浮动clearfix

一直有在用,但是没有分析几种清楚浮动的方法和他们之间的比较。


为什么要清除浮动?

盒子里用了CSS float属性,父级对象不能被撑开。

claerfix-before

这是6个float:left<li>,父级<ul>添加上了边框,明显没有撑开。


这样的副作用是什么?

  1. 背景效果出不来

  2. 边框出不来

  3. margin\paddding不正确


清除浮动的四种方法比较

  1. 使用高度

    说明:在父元素上加个高度

    缺点:内容的高度必须确定而且计算好,如果以后要改变或者做自适应,就很麻烦。

    推荐指数:★☆☆☆☆

  2. clear:both;

    说明:先说说clear:both;:左右均不允许浮动元素。如果是clear:left;:左侧不允许浮动元素。clear:right;就不用说啦。然后,定义一个类是clear:both;属性,在浮动元素的最后添加一个空的标签,用上这个类,它就把整个父元素撑开了。

    缺点:需要在html里面多加标签

    推荐指数:★★★☆☆

  3. 父级定义overflow:hidden;

    说明:overflow:hidden;:。必须定义zoom:1;,zoom是IE的专用属性,本身作用是用来设置和检索对象的缩放比例,但基本用不动。可以用来清除浮动、解决margin导致的重叠问题。

    缺点:和position一起用的时候,有可能出现超出部分隐藏。而且,感觉zoom不是很规范。

    m20140815145811

    m20140815145700

    推荐指数:★★★☆☆

  4. 父级div定义伪类:after和zoom

    说明:

    这要开始详细的说了。我之前都是用overflow:hidden;,现在也开始用这种方法了。

    代码:

    .clearfix {
        *zoom:1;
    }
    .clearfix:after {
        display: block;
        clear: both;
        height: 0;
        font-size: 0;
        content: ' ';
    }
    

    :after选择器在Quirks模式在不支持的。

    因此需要zoom:1。

    一般这种方法可以放在定义公共类的CSS文件中。

    (博客主题没有加<code><pre>的CSS样式,先将就看看。)

    推荐指数:★★★★☆

麻凯倩

微信:makaiqian