▲浅谈清除浮动

  浮动具有包裹和破坏两个特性,正因为这样,它才可以用来布局,实现丰富多彩的网页。但也因为这样,使得页面经常出现错乱,于是有了清除浮动。

  那么,清除浮动都有哪些方式呢?它们各自都有什么优缺点?我们该怎么选择以得到最适合我们的清除浮动样式呢?接下来我将谈谈自己在开发中总结的一点点经验。先写下一段代码,我将用他进行说明。

/*css 代码*/
  
<style type="text/css">
    .fl{
float:left;} .fr{float:right;}
    .clear{clear:both;}
    .dib{display:inline
-block;} .dt{display:table;} .dtc{display:table-cell;}
    .ovh{overflow:hidden;} .zoom{zoom:
1;} .clear-float{overflow:hidden;zoom:1;}
    .clearfix:after{clear:both;display:block;visibility:visible;height:
0;line-height:0;content:"";} .clearfix{zoom:1;s}
  
</style>

/*html代码*/
  
<div class="box">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>

  以上就是本篇文字将要用到的例子。

============================================================================================

  清除浮动的方式及各自的优缺点

  1、<br />标签的clear属性;(参考自:林小志《css那些事儿:掌握网页样式与css布局核心技术》)

  2、css样式的clear属性;

  3、display相关属性值;

  4、overflow的非visible属性值;

  5、zoom:1清除浮动;

  6、:after伪类

  7、表格嵌套浮动内容(没有试过这种用法,但为了解决浮动而增加一层表格结构标签,先入为主地就把它给pass了。在此只是想说明有这么一种用法。)

  用法说明:(以代码演示)

  1、

   <div class="box">
    
<div class="fl"></div>
    
<div class="fr"></div>
    
<br class="all" />
  
</div>

 

  缺点:(1)多了一层结构化标签;(2)标签必须进行合理地(即:br标签须放在浮动层之后立即清除)嵌套,否则无法实现清除效果;

  2、

  <div class="box">
    
<div class="fl"></div>
    
<div class="fr"></div>
    
<div class="clear"></div>
  
</div>

  或:

  <div class="box">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>  

  <div class="clear other-box"></div>

  缺点:(1)多了一层结构化标签;(2)有可能出现清除效果不佳的情况,如在ie6下有出现过高度变高的情况,或许还有其他的问题。不解释...

  3、 

  <div class="box dib">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>
  或
  
<div class="box dt">
    
<div class="fl"></div>
    
<div class="fr"></div>
    
<div class="clear"></div>
  
</div>
  或
  
<div class="box dtc">
    
<div class="fl"></div>
    
<div class="fr"></div>
    
<div class="clear"></div>
  
</div>

  简:这三个样式的用法可以归结为一类,首先它们都能用来清除浮动,其次它们都有共同的缺点,如下:

  缺点:右浮动层失效,变为左浮动层(这个有待进一步确认:1、成左浮动层,那么它就具有包裹性;2、不是浮动层,随左浮动层自适应浮动。检测方法可用firebug调试),内容往左浮动层靠。要用它们的唯一出路就是设定宽度。

  4、

  <div class="box ovh">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>

  缺点:1、只能清除标准浏览器的浮动,对于ie6这类老古董无效;2、浮动层里有层级定位块的时候,层级块会被隐藏 ,解决的办法就是把overlow的属性值改为auto;但是auto貌似也有局限性,没用过也没碰过,所以无权发言,掠过...

  5、

  <div class="box zoom">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>

   缺点:ie浏览器的私有属性,无法通过css的验证;

  补充:结合4、5两点存在的问题,我们可以把两者结合起来用,代码如下:  

   <div class="box clear-float">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>

  6、

    <div class="box clearfix">
    
<div class="fl"></div>
    
<div class="fr"></div>
  
</div>

  缺点:after伪类的属性不被ie6支持,所以需要添加zoom:1来针对ie6进行清除浮动。有一点,content后面最好是为空。

=============================================================================

  写在后面的话:

  只要用到了浮动,就为页面买下来布局的隐患,正确的语义、合理的结构、简洁的代码,将是你避免浮动造成布局问题的一个关键所在;在清除浮动的问题上,我们可以选择适合自己的方式,这往往可以根据自己开发项目的大小来决定。一个小项目,也许只需要clear就能够解决了;而对于大的项目,即使碰到clear-float说不定也要出现诸多问题,但是当我们了解了它们之间的优缺点,扬长避短,还是可以解决问题的。

posted @ 2011-07-04 17:20  捌莱闲人  阅读(2133)  评论(5编辑  收藏  举报