快速业务通道

清除浮动(闭合浮动元素)方法总结

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26

    很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。

    最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段代码:

<div id="outer">    
  <div id="inner"> <h2>A Column</h2> </div>    
  <h1>Main Content</h1>    
  <p>Lorem ipsum</p>    
</div>  


    我们可以为“#inner”设定一个宽度值(比如说20%),但是由于div是块级元素,即使我们设定了宽度,其后面的内容也只能在下一行中显示,除非我们给它设定一个浮动属性(无论是向左浮动或者向右浮动)。那么此时会产生我们上面提到的问题了。

    如果“#inner”的宽度和高度都比“#outer”小,这不会有问题。

    但是,如果“#inner”的高度超过了“#outer”,那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后,它就会脱离的文本流,无论其宽度和高度怎么变化都不会使“#outer”跟随变化。

    解决办法:

    1)额外标签法

    第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似:
<br style="clear:both;" />  


    或者使用
<div style="clear:both;"></div>

    这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

    注:我发现在Internet Explorer中(无论是6还是7)<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题,不知道是什么原因?!

    2)使用after伪类

    使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
#outer:after{ 
    content:"."; 
    height:0; 
    visibility:hidden; 
    display:block; 
    clear:both;  


    奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用,所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数,CSS代码:
/* 这段代码只有IE/Win可以看见 \*/ 
CSS 规则 
/* 结束Hack */  

    上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。

    正是基于

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号