Clear Float

编辑推荐:3月31日前,点击注册激活 Coding.net 立赠30天付费会员 ,体验极速代码托管服务!

众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开。换句简单好理解的话来说,假如你在写CODE时,其中div.A(这个就是说页面中有一个div,并且把其命名为class="A")中包含了两个或多个子元素div.B,div.C,div.D(这里我以三个为例),并且此时div.B和div.C进行浮动,而div.D不进行任何浮动,此时你可以看到父元素div.A高度仅靠div.D来撑开其高度,如果您将div.A所有子元素进行浮动,当你没有清除内部浮动时,此时会导致浮动的父元素div.A无法自动撑开本身的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。下面我们先来看看这两种现像的实例:

HTML Code:

  <div class="demo A">
    <div class="demoB demoFloat">float left</div>
    <div class="demoC demoFloat">float right</div>
    <div class="demoD demoFloat">not float</div>
  </div>

给上面的加上一些基本的样式:

 
  .demo {
     width: 300px;
     border: 1px solid red;
  }
 .demoFloat {
     background: green;
     margin: 0;
 }
 .demoC {
    background: orange;
 }
 .demoD {
    background: lime;
    border: 2px solid blue;
 }

下面先来看第一种,div.B和div.C进行浮动,而div.D不进行浮动

 .demoB {
   float: left;
 }
 .demoC {
   float: right;
 }

效果:

上图明显告诉我们两点:其一:div.B和div.C两个div进行浮动后,完全脱离了文档流,不在被其父元素A所包含;其二:由于div.D没有进行浮动,此时div,B和div.C在文档流中的位置就被div.D占了(上图中绿色长条部分),此时父元素的高度被div.D撑开。接着我们变动一下,现在把div.A的三个子元素div.B,div.C,div.D都进行浮动,在上面的基础上把div.D加上一个 左浮动:

  .demoD {
    float: left;
  }

效果:

此时div.A的三个子元素就完全脱离了文档流,也正如我前面所说的,不在被div.A包含了。同时div.A的高度也无法撑开,仅有边框的大小存在了(如果你不加边框,你div.A就无法看到,就像是从这个世界中消失了,为了好说明问题我达里加了边框)。

现在知道问题产生源根源,现在就可以针对这个根源采取解决办法,直接一点就是清除浮动(有的地方也称作关闭浮动),对于如何清除浮动,有很多初学的朋友还是不太明白,那么今天我罗列一下几种常见的清除浮动的方法:

一、Clear:both清除浮动

clear清除浮动主要是借用clear属性来清除浮动,这是一种比较陈旧的清除浮动方法。使用clear:both来清除浮动,我们需要增加一个额外元素,比如说一个div呀br标签,并且定义他们的样式为“clear:both”,其通常使用的结构方式如下:

  <div class="demo A">
    <div class="demoB demoFloat">float left</div>
    <div class="demoC demoFloat">float right</div>
    <div class="demoD demoFloat">not float</div>
    <div class="clear"></div>
  </div>

并且在div.clear上应用样式:

  .clear {
    clear:both;/*主要使用这个属性来清除浮动*/
    /*为了不让ie具有一定的空间,个人建议加上下面三个属性*/
    height: 0;
    line-height: 0;
    font-size: 0;
  }

这样一来就把浮动给关闭了,此时父元素div.A也不会因为其子元素进行了浮动而无法自己撑开本身的高度,如下图所示

二、使用overflow

使用overflow方法来清除浮动相对来说比较简单,只需要在有浮动的元素上面加上下面的属性:

  .A {
    overflow: auto;
    zoom: 1;/*在IE下触发其layout,也要以使用_height:1%来代替zoom*/
  }

使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以,其区据说在于一个对seo比较友好,另个hidden对seo不是太友好,其他区别我就说不上了,也不浪费时间。大家一起看看overflow清除浮动的效果吧:

对于overflow属性清滁浮动我们还可以这样应用:

   .A {
      o\verflow: auto;/*除IE6以及其以下版本不识别之外,其他浏览器都识别*/
   }
	
   * html .A {
      height: 1%; /* IE5-6 */
   }

三、clearfix方法

这种方法清除浮动是现在网上最拉风的一种清除浮动,他就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而clearfix利用其伪类clear:fix在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:

HTML Code:

   <div class="demo A clearfix">
     <div class="demoB demoFloat">float left</div>
     <div class="demoC demoFloat">float right</div>
     <div class="demoD demoFloat">not float</div>
   </div>

使用clearfx来清除浮动最主要掌握一点,需要在有浮动元素的父元素中加入一个叫clearfix的class名称,比如说我们这个例子,我们需要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式

  .clearfix:before,
  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
  }
  .clearfix:after {clear: both;}
  .clearfix {zoom: 1;} /* IE < 8 */

效果:

其实只使用clearfix:after就可以达到清除浮动的效果,但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,具体造成这种原因,大家可以浏览写得《Everything you Know about Clearfix is Wrong》你要是对此问题感兴趣的话,你还可以查看这个DEMO。所以为了让浏览器兼容这个clearfix的清除浮动,在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题,我在这里只是简单介绍了一下,如果你对这个clearfix更感兴趣,你可以在本地对他进行拆解,加强自己对他的深一层理解。

针对clearfix的清除浮动Nicolas在《Better float containment in IE using CSS expressions》中介绍了一种更简单的清除浮动的方法:

   .clearfix:before,
   .clearfix:after {
      content:"";
      display:table;
   }
   .clearfix:after {
     clear:both;
     overflow:hidden;
   }
  .clearfix {
     zoom:1; /* IE < 8 */
  }

这种方法使用和前面的clearfix一样,不同之处只是把clearfix:before和clearf:after中的css写得更简单了,原理还是一样的。我测试过了在所有浏览器中都能清除浮动。你不仿也试试。大家可以看这个DEMO

那么清除浮动的方法基本上全了,最后我总结一下我个人的看法,仅供参考在这么多种清除浮动的方法中,都没有离开最原始的clear:both方法,特别是clearfix:after清除浮动,完全就是clear:both的一种变身,区别在于不需要在html增加一个标签,而只需要在有浮动元素的父元素中加上一个clearfix的class名,这样就轻松解决了清除浮动的问题。但在IE6-7下面,我们只要触发子hasLayout的元素就可以清除浮动了,常见的就是zoom:1。(有关于hasLayout的更详细东西可以点击这里)

如需转载烦请注明出处:W3CPLUS

返回顶部