眾所周知，平時在寫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:
float leftdiv>下面先來看第一種，div.b和div.c進行浮動，而div.d不進行浮動float rightdiv>
not floatdiv>
div>
.demo
.demofloat
.democ
.demod
.demob效果：.democ
上圖明顯告訴我們兩點：其一：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效果：
此時div.a的三個子元素就完全脫離了文件流，也正如我前面所說的，不在被div.a包含了。同時div.a的高度也無法撐開，僅有邊框的大小存在了（如果你不加邊框，你div.a就無法看到，就像是從這個世界中消失了，為了好說明問題我達裡加了邊框）。
現在知道問題產生源根源，現在就可以針對這個根源採取解決辦法，直接一點就是清除浮動（有的地方也稱作關閉浮動），對於如何清除浮動，有很多初學的朋友還是不太明白，那麼今天我羅列一下幾種常見的清除浮動的方法：
一、clear:both清除浮動
clear清除浮動主要是借用clear屬性來清除浮動，這是一種比較陳舊的清除浮動方法。使用clear:both來清除浮動，我們需要增加乙個額外元素，比如說乙個div呀br標籤，並且定義他們的樣式為「clear:both」,其通常使用的結構方式如下：
float leftdiv>這樣一來就把浮動給關閉了，此時父元素div.a也不會因為其子元素進行了浮動而無法自己撐開本身的高度，如下圖所示float rightdiv>
not floatdiv>
div>
div>
並且在div.clear上應用樣式：
.clear
二、使用overflow
使用overflow方法來清除浮動相對來說比較簡單，只需要在有浮動的元素上面加上下面的屬性：
.a使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以，其區據說在於乙個對seo比較友好，另個hidden對seo不是太友好，其他區別我就說不上了，也不浪費時間。大家一起看看overflow清除浮動的效果吧：
對於overflow屬性清滁浮動我們還可以這樣應用：
.a三、clearfix方法* html .a
這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入乙個div.clear標籤，而clearfix利用其偽類clear:fix在元素內部增加乙個類似於div.clear的效果。下面來看看其具體的使用方法：
html code:
float leftdiv>效果：float rightdiv>
not floatdiv>
div>
使用clearfx來清除浮動最主要掌握一點，需要在有浮動元素的父元素中加入乙個叫clearfix的class名稱，比如說我們這個例子，我們需要在div.a中加入乙個clearfix的class名。接著在給這個clearfix加上樣式
.clearfix:before,
.clearfix:after
.clearfix:after
.clearfix /* 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一樣，不同之處只是把clearfix:before和clearf:after中的css寫得更簡單了，原理還是一樣的。我測試過了在所有瀏覽器中都能清除浮動。你不仿也試試。大家可以看這個demo.clearfix:after
.clearfix:after
.clearfix
那麼清除浮動的方法基本上全了，最後我總結一下我個人的看法，僅供參考在這麼多種清除浮動的方法中，都沒有離開最原始的clear:both方法，特別是clearfix:after清除浮動，完全就是clear:both的一種變身，區別在於不需要在html增加乙個標籤，而只需要在有浮動元素的父元素中加上乙個clearfix的class名，這樣就輕鬆解決了清除浮動的問題。但在ie6-7下面，我們只要觸發子haslayout的元素就可以清除浮動了，常見的就是zoom:1。(有關於haslayout的更詳細東西可以點選這裡)
css如何清除浮動？
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題 1.如下，我給父盒子設定乙個boder，內部放兩個盒子乙個big 乙個small，未給big和small設定浮動，則他們會預設撐開父盒子 2.當我給內部兩個盒子加上float屬性的時候 頂部深藍色盒子就會頂上來，然後父盒子因為沒...
css如何清除浮動（四）
通過隔牆法，我們可以很方便的清楚浮動。下面我們再來介紹一種清楚浮動的方法 內牆法.仍然是同樣的例子。內牆法和隔牆法很相似，區別在於將這堵牆dis放在div1裡面。通過設定這堵牆的clear both來清除浮動 同樣設定該div的height 10px,使div1與div2之間出現間距。執行結果 那麼...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...