CSS 清除浮动

 

div定位布局图解（position:absolute|relative|fixed和float浮动）

http://www.ipmtea.net/css/201010/09_335.html

 

 

众 所周知，平时在写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;/*在ＩＥ下触发其layout，也要以使用_height:1%来代替zoom*/
  }

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

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

   .A {
      o\verflow: auto;/*除ＩＥ6以及其以下版本不识别之外，其他浏览器都识别*/
   }
	
   * 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，具体造成这种原因，大家可以浏览Thierry Koblentz写得《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

评论

1 楼 水中月120 2015-06-13  

好文章，收藏~\(≧▽≦)/~啦啦啦