CSS——如何清除浮动

众所周知，平时在写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就没法看到，就像是从这个世界中消失了，为了好说明问题我达里加了边框）。

如今知道问题产生源根源，如今就能够针对这个根源采起解决办法，直接一点就是清除浮动（有的地方也称做关闭浮动），对于如何清除浮动，有不少初学的朋友仍是不太明白，那么今天我罗列一下几种常见的清除浮动的方法：

1、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也不会由于其子元素进行了浮动而没法本身撑开自己的高度，以下图所示

2、使用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 */ } 

3、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的更详细东西能够点击这里)