清除浮动的几种方法

网页使用浮动，如果不及时清除浮动，可能会造成网页布局的错乱。

例如下面代码段，如果不清除浮动，并且.outer盒子没有设置高度，那么就会造成.outer盒子高度无法被撑开，所以要清除浮动。

<div class="outer"> 
    <div class="left">left</div> 
    <div class="right">right</div>
</div> 

清除浮动的方法有很多，下面列举几个较常用的方法：

1. 在父级div上定义height

.outer{
    height:150px;
}

不建议使用这种方法，因为这种方法只适合在高度固定的情况下使用，其他情况并不适用。

2. 在结尾处添加新的标签 clear:both

.clearfix{
    clear:both;
}
<div class="outer"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
    <div class="clearfix"></div>
</div> 

不推荐使用，使用多余的标签，会造成页面太过冗余。

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

.outer:after{
    content:"";
    display:block;
    height:0;
    overflow:hidden;
    clear:both;
}
.outer{
    zoom:1;/*兼容IE浏览器*/
}

大部分网站使用这种方法， 推荐使用这种方法。

4. 父级div定义overflow:hidden

.outer{
    overflow:hidden;
    zoom:1;/*兼容IE浏览器*/
}

不推荐使用这种方法。超出可视范围的内容将会被隐藏。

这种方法的原理是将父级元素变成BFC（块级格式化上下文），关于BFC详情请戳这里。

5. 父级div一起浮动

.outer{
    float:left;
}

不推荐使用，可能会造成新的浮动问题。