眾所周知，平時(shí)在寫HTML代碼時(shí)，難免少不了使用Float樣式，這樣一來，假使您沒有清除浮動(dòng)，那么有浮動(dòng)元素的父元素容器將元素將無法自動(dòng)撐開。換句簡單好理解的話來說，假如你在寫CODE時(shí)，其中div.A（這個(gè)就是說頁面中有一個(gè)div，并且把其命名為class="A"）中包含了兩個(gè)或多個(gè)子元素div.B,div.C,div.D(這里我以三個(gè)為例)，并且此時(shí)div.B和div.C進(jìn)行浮動(dòng)，而div.D不進(jìn)行任何浮動(dòng)，此時(shí)你可以看到父元素div.A高度僅靠div.D來撐開其高度，如果您將div.A所有子元素進(jìn)行浮動(dòng)，當(dāng)你沒有清除內(nèi)部浮動(dòng)時(shí)，此時(shí)會(huì)導(dǎo)致浮動(dòng)的父元素div.A無法自動(dòng)撐開本身的高度。也就是說：當(dāng)一個(gè)元素是浮動(dòng)的，如果沒有關(guān)閉浮動(dòng)時(shí)，其父元素不會(huì)包含這個(gè)浮動(dòng)元素，因?yàn)榇藭r(shí)浮動(dòng)元素從文檔流中脫離。下面我們先來看看這兩種現(xiàn)像的實(shí)例：

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進(jìn)行浮動(dòng)，而div.D不進(jìn)行浮動(dòng)

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

效果：

上圖明顯告訴我們兩點(diǎn)：其一：div.B和div.C兩個(gè)div進(jìn)行浮動(dòng)后，完全脫離了文檔流，不在被其父元素A所包含；其二:由于div.D沒有進(jìn)行浮動(dòng)，此時(shí)div,B和div.C在文檔流中的位置就被div.D占了（上圖中綠色長條部分），此時(shí)父元素的高度被div.D撐開。接著我們變動(dòng)一下，現(xiàn)在把div.A的三個(gè)子元素div.B,div.C,div.D都進(jìn)行浮動(dòng)，在上面的基礎(chǔ)上把div.D加上一個(gè) 左浮動(dòng):

.demoD {float: left; }

效果：

此時(shí)div.A的三個(gè)子元素就完全脫離了文檔流，也正如我前面所說的，不在被div.A包含了。同時(shí)div.A的高度也無法撐開，僅有邊框的大小存在了（如果你不加邊框，你div.A就無法看到，就像是從這個(gè)世界中消失了，為了好說明問題我達(dá)里加了邊框）。

現(xiàn)在知道問題產(chǎn)生源根源，現(xiàn)在就可以針對(duì)這個(gè)根源采取解決辦法，直接一點(diǎn)就是清除浮動(dòng)（有的地方也稱作關(guān)閉浮動(dòng)），對(duì)于如何清除浮動(dòng)，有很多初學(xué)的朋友還是不太明白，那么今天我羅列一下幾種常見的清除浮動(dòng)的方法：

一、Clear:both清除浮動(dòng)

clear清除浮動(dòng)主要是借用clear屬性來清除浮動(dòng)，這是一種比較陳舊的清除浮動(dòng)方法。使用clear:both來清除浮動(dòng)，我們需要增加一個(gè)額外元素，比如說一個(gè)div呀br標(biāo)簽，并且定義他們的樣式為“clear:both”,其通常使用的結(jié)構(gòu)方式如下：

<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上應(yīng)用樣式：

.clear {clear:both;/*主要使用這個(gè)屬性來清除浮動(dòng)*/ /*為了不讓ie具有一定的空間，個(gè)人建議加上下面三個(gè)屬性*/ height: 0; line-height: 0; font-size: 0; }

這樣一來就把浮動(dòng)給關(guān)閉了，此時(shí)父元素div.A也不會(huì)因?yàn)槠渥釉剡M(jìn)行了浮動(dòng)而無法自己撐開本身的高度，如下圖所示

二、使用overflow

使用overflow方法來清除浮動(dòng)相對(duì)來說比較簡單，只需要在有浮動(dòng)的元素上面加上下面的屬性：

.A {overflow: auto; zoom: 1;/*在ＩＥ下觸發(fā)其layout，也要以使用_height:1%來代替zoom*/ }

使用overflow屬性來清除浮動(dòng)有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無法達(dá)到清除浮動(dòng)效果，其他兩個(gè)值都可以，其區(qū)據(jù)說在于一個(gè)對(duì)seo比較友好，另個(gè)hidden對(duì)seo不是太友好，其他區(qū)別我就說不上了，也不浪費(fèi)時(shí)間。大家一起看看overflow清除浮動(dòng)的效果吧：

對(duì)于overflow屬性清滁浮動(dòng)我們還可以這樣應(yīng)用：

.A {o\verflow: auto;/*除ＩＥ6以及其以下版本不識(shí)別之外，其他瀏覽器都識(shí)別*/}* html .A {height: 1%; /* IE5-6 */}

三、clearfix方法

這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他就是利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽，而clearfix利用其偽類clear:fix在元素內(nèi)部增加一個(gè)類似于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來清除浮動(dòng)最主要掌握一點(diǎn)，需要在有浮動(dòng)元素的父元素中加入一個(gè)叫clearfix的class名稱，比如說我們這個(gè)例子，我們需要在div.A中加入一個(gè)clearfix的class名。接著在給這個(gè)clearfix加上樣式

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

效果：

其實(shí)只使用clearfix:after就可以達(dá)到清除浮動(dòng)的效果，但只使用clearfix:after時(shí)在跨瀏覽器兼容問題會(huì)存在一個(gè)垂直邊距疊加的bug，具體造成這種原因，大家可以瀏覽Thierry Koblentz寫得《Everything you Know about Clearfix is Wrong》你要是對(duì)此問題感興趣的話，你還可以查看這個(gè)DEMO。所以為了讓瀏覽器兼容這個(gè)clearfix的清除浮動(dòng)，在原來的基礎(chǔ)上加止clearfix:before,這樣就解決了跨瀏覽器的兼容問題，我在這里只是簡單介紹了一下，如果你對(duì)這個(gè)clearfix更感興趣，你可以在本地對(duì)他進(jìn)行拆解，加強(qiáng)自己對(duì)他的深一層理解。

針對(duì)clearfix的清除浮動(dòng)Nicolas在《Better float containment in IE using CSS expressions》中介紹了一種更簡單的清除浮動(dòng)的方法：

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

這種方法使用和前面的clearfix一樣，不同之處只是把clearfix:before和clearf:after中的css寫得更簡單了，原理還是一樣的。我測試過了在所有瀏覽器中都能清除浮動(dòng)。你不仿也試試。大家可以看這個(gè)DEMO

那么清除浮動(dòng)的方法基本上全了，最后我總結(jié)一下我個(gè)人的看法，僅供參考在這么多種清除浮動(dòng)的方法中，都沒有離開最原始的clear:both方法，特別是clearfix:after清除浮動(dòng)，完全就是clear:both的一種變身，區(qū)別在于不需要在html增加一個(gè)標(biāo)簽，而只需要在有浮動(dòng)元素的父元素中加上一個(gè)clearfix的class名，這樣就輕松解決了清除浮動(dòng)的問題。但在IE6-7下面，我們只要觸發(fā)子hasLayout的元素就可以清除浮動(dòng)了，常見的就是zoom:1。(有關(guān)于hasLayout的更詳細(xì)東西可以點(diǎn)擊這里)

轉(zhuǎn)載于:https://www.cnblogs.com/Simon-xm/p/3951733.html

總結(jié)

以上是生活随笔為你收集整理的CSS——如何清除浮动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。