Clear Float 清除浮动

众所周知，平时在写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