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