您现在的位置: 365建站网 > 365学习 > 如何清理浮动

如何清理浮动

文章来源:365jz.com     点击数:181    更新时间:2011-03-21 17:37   参与评论

     先说说浮动的情况, 在一个块容器里中的内容如果有浮动,那容器就会取不到里面内容的高度,而发生错位。这个时侯就需要清理浮动。

<style>
.box
{border:1px solid red;}
.next
{border:1px solid green;}
.fl
{float:left;}
.fr
{float:right;}
   </style>
<div class="box">
<div class="fl">left</div>
<div class="fr">right</div>
</div>
<div class="next">next</div>

     清理浮动的方法是在浮动内容后增加一个clear:both的定义

<div class="box">
<div class="fl">left</div>
<div class="fr">right</div>
<div style="clear:both"></div>
</div>

     也可以添加一个类来实现之,这里通过伪类来实现,在不支持伪类的IE6下使用zoom:1来触发重新计算。

.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
.clearfix
{zoom:1;}
<div class="box clearfix">
<div class="fl">left</div>
<div class="fr">right</div>
</div>

     嗯,下面这种方法也能清理浮动,原理是设定宽度和overflow来重新触发容器的计算。

.box{width:500px;overflow:hidden;}

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (181人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------