扫除浮动的常用方法

清除浮动的常用方法

先说不清除浮动的效果：
扫除浮动的常用方法
给父元素这只边框都不会把他们包裹起来，俗称高度塌陷。

然后说说几个不常用的清除浮动方法，比如：

<div style="overflow:hidden">
    <div style="float:left;"></div>
    <div style="float:left;"></div>
</div>

就是给父元素设置overflow属性的那种，具体样式就不写了；

还有这种：

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

这种的是在浮动元素最后加一个空的div然后给他清楚浮动，这个原理就是让它左右两边都不挨着浮动元素，所以他就钻到父元素的最下边了，但是还是在父元素内，所以就把父元素给撑起来了。不会塌陷。效果如下：

扫除浮动的常用方法

还有：

<div style="float:left;">
    <div style="float:left;"></div>
    <div style="float:left;"></div>
</div>

给父元素也加浮动，这种方式是极不好的，会影响父元素的定位

还有一种极不好的，是给设置父元素的display属性为table。这个table属性的元素布局的时候坑太多了，所以这种清除浮动的方式是极不推荐的。

最后被大家所广泛采用的一种方式是：

    <style>
        .box{
            width:400px;
            border:red solid 1px;
        }
        .clearfix{
            *zoom:1;    
        }
        .clearfix:after{
            display:block;
            content:"";
            clear:both;
        }
        .one{
            width:100px;
            height:100px;
            background-color:yellow;
            margin:5px;
            float:left;
        }
    </style>
    <div class="box clearfix">
        <div class="one">one</div>
        <div class="one">two</div>
        <div class="one">three</div>
    </div>

用after伪类在box父元素内的最后添加一个子元素，每个dom元素都必须有display和content属性，所以要写上：

.clearfix:after{
            display:block;
            content:"";
            clear:both;
        }

注意display属性不可以写inline，因为inline撑不起父元素。
然后，ie6、7不支持伪类：after，所以我们在

    .clearfix{
        *zoom:1;    
    }

设置了zoom属性，使用来触发ie67的haslayout属性来支持：after伪类，haslayout是关于ie低版本浏览器排版的一个属性。

扫除浮动的常用方法

相关推荐