代码改变世界

css 清除浮动方法

2011-11-28 11:34  NEVERGIVEUP-  阅读(144)  评论(0)    收藏  举报
1.使用空标签清除浮动
<style type="text/css">
.clear
{clear:both;font-size:0px;height:0px;line-height:0px;overflow:hidden;}
</style>
<div style="background:blue;">
<div style="float:left;width:400px;height:300px;background:red;">red</div>
<div style="float:left;width:400px;height:300px;background:gray">ball</div>
<div class="clear"></div>
</div>
2.使用after伪对象清除浮动
<style type="text/css">
.ft_clear:after
{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.ft_clear
{zoom:1;}/*IE6*/
</style>
<div style="background:blue;" class="ft_clear">
<div style="float:left;width:400px;height:300px;background:red;">red</div>
<div style="float:left;width:400px;height:300px;background:gray">ball</div>
</div>