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的更詳細東西能夠點擊這裏)