眾所周知，平時在寫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的更詳細東西可以點擊這里)

轉載于:https://www.cnblogs.com/Simon-xm/p/3951733.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。