清除浮动知识总结

清除浮动是一个经常碰到的问题，也是有点让人头疼的东西.
什么时候要用到清除浮动呢？当元素内部有子元素浮动时，父元素的高度无法被撑起，下面的元素没办法定位，这时候就需要用到清除浮动.
我总结的清除浮动的方法有三种:

1.clear:both

clear:both一般是浮动元素周围的元素所用到的，多说无益，看下面的代码:

//html
div id="left">
</div>
<div id="right">

//css
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}
#right{
    clear: both;
    width: 200px;
    height: 200px;
    background: yellow;
}

效果:

可以看到，黑色div浮动之后，他下面的黄色div使用了clear:both,但是这种清除浮动方式我用的不是很多，因为有时候可能要在html中添加没有意义的div来清理浮动.

2.overflow:hidden

这种方式是我目前用的比较多的，因为不需要加div,而且代码量也不多.这种方式与clear的主要区别是:overflow是设置在浮动元素的父div之上.代码如下:

//html
div id="container">
    <div id="left">
</div>
</div>
    <div id="right">
</div>

//css
#container{
    overflow: hidden;
}
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}
#right{
    width: 200px;
    height: 200px;
    background: yellow;
}

效果图和上面的图一样，所以这里就不上图了.但是overflow:hidden特殊情况下可能会有副作用，因为它有可能将你想要浮动在父元素外面的元素隐藏掉.但是，我还是喜欢用^_^.（最近更新：overflow:hidden这种方法早已弃用！！！）

3.clear:fix

这种清除浮动方式貌似比较酷炫？但是css代码有点多,不过这种方式好像没有什么不良的影响，方法呢，是在父元素上面添加clearfix样式.然后通过:after伪类的方式来清除浮动,代码如下:

//html
<div id="container" class="clearfix">
    <div id="left">
</div>
</div>
    <div id="right">
</div>

//css
.clearfix:after{
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
} 
#left{
    float: left;
    width: 200px;
    height: 200px;
    background: #000;
}
#right{
    width: 200px;
    height: 200px;
    background: yellow;
}

效果图和第一个一样.
清除浮动总结完毕!

最近更新：
最近又发现一种方法，代码更少:

clearfix:after{
    content: "";
    display: table;
    clear: both;
}