您现在的位置： 365建站网 > 365文章 > 如何清理浮动

如何清理浮动

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

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

</>code
    <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的定义

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

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

</>code
.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来重新触发容器的计算。

</>code
.box{width:500px;overflow:hidden;}

浮动

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

您可能感兴趣的文章:

发表评论 (273人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：DropDownList 和Combox 数据绑定的常用方法
下一篇：ASP.NET中DataGrid和DataList控件用法比较

大家感兴趣的内容

如何清理浮动

</>code

</>code

</>code

</>code

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询