關於css清除浮動的補充

之前寫過關於清除浮動的一些方法介紹---（http://www.cnblogs.com/qiwenke/archive/2012/10/07/2714434.html），最近在學習的過程中又翻閱到了不少好的文章---（如http://www.iyunlu.com/view/css-xhtml/55.html）----

因此重頭審視之前寫的文章的時候，發現漏洞百出。特此加上一篇簡單的補充作為自己的學習筆記：

一、仍然以原來代碼為例（如下）：

<div class="container">     <div class="block1">子項目1</div>     <div class="block2">子項目2</div> </div>

.block1{ width:200px;              height:200px;          background: #CBA627;          float:left;          margin-right:10px;}.block2{ width:200px;              height:100px;          background:#009900;          float:left;}

（1）首先，針對之前提到的:after方法（即原樣式中添加新樣式如下）：

.container:after{ content:" 20";visibility:hidden;display:block;clear:both;height:0;}

存在兩個比較模糊的地方，一個是理解不準確，不深入；另一個則是margin-bottom會引發問題。

關於第一個理解不準確，之前是稱".container:after"為偽類，其實應該是虛擬元素才對。{content:"20";visibility:hidden;height:0;}很明顯的表明了這是一個在.container尾部添加的一個內容為20 的元素，且為了不影響父元素內容被隱藏，高度也被設定為0(其實可以理解為在父元素尾部新加了一個高度為0的"<div>20</div>")。{clear:both;display:block;}則為該元素添加了最終要的clear屬性，並設定為block。整個樣式最後的結果就相當於添加了一個"<div style="clear:both;display:block;height:0">20</div>",.container:after指的就是這個"div"。

關於第二個margin-bottom會引發問題是指，當.container內以浮動子項目結尾，而且浮動子項目具有margin-bottom值時，margin-bottom的數值會在ie6/7/8中失效。解決方案則是取消:after方法，代之以添加空標籤（clear:both）的方法。

（2）對於清除浮動的方法總結過於簡單，一是不全面，而是不深入。上文中提到的參考文章（http://www.iyunlu.com/view/css-xhtml/55.html），我覺得對於浮動問題的講解比較深入，而且對方法的整理和分類也比較合理。尤其是將方法歸類為“清除”和“閉合”。

清除：主要是指通過添加空元素（並保證該元素display:block;clear:both;）來實現。其實通過對.container:after的解釋可以看出，該方法本質上仍然是添加元素來清除浮動。

閉合：是指，不添加額外的元素或內容，通過設定父元素來實現。有一種方法，之前的文章已經提到，即.container{overflow:hidden;zoom:1}，但是參考文章還提到了是給父元素添加display:table的方法和添加overf:auto的方法。

綜上，如果用例子來表示分類及分類中的方法的話應該如下所示(以html文檔和css為基礎)：

清除類方法：1.添加空標籤：<div class="clear"></div>  .clear{ clear:both;}

                                     或者<br class="clear"/>  .clear{ clear:both;}

                  2.使用:after虛擬元素：.container:after{ content:".";visibility:hidden;height:0;  display:block;clear:hidden;}  .container{zoom:1}(為了相容ie6)

閉合類方法：1.使用overflow：.container{ overflow:hidden;zoom:1;}

                                        或者.container{ overflow:auto;zoom:1;}

                  2.使用display： .container{ display:table;}

此外，還有一種方法沒有把它歸類到任何一類，即：給父元素添加浮動的方法---如：.container{ float:left;}。因為該方法在文檔結構比較複雜的時候會對文檔產生極壞的影響，因此是最不推薦的一個，忽略之。

二、

方法多，自然就要權衡比較一下，採取最優方案。其實，著眼於兩個“類”的時候，優劣勢就會顯得比較明顯。

清除類方法  優勢：比較簡單，便於掌握使用。劣勢：會在文檔中添加無意義的標籤元素。

閉合類方法  優勢：不對原文檔的html結構產生影響，書寫也比較簡單。劣勢：要考慮到相容，而且該類中的方法都會對父元素的樣式或文檔表現產生影響。

因此，實際上閉合類的方法相對而言，是不推薦使用的。反過來再看清除類方法中的虛擬元素方法，它既沒有添加多餘的東西，也沒有改變父元素的display或者overflow而對其產生未知的影響，只是需要用到zoom來相容一下。因此，該方法應該算是比較好的解決方案，推薦使用。本文中使用的虛擬元素方法的寫法是比較常見的一種。在文中提到的參考文章中，對該方法又進行了最佳化，可以參考一下。

 

三、

要注意的是，上文中關於zoom提到了haslayout這一ie特有的概念。實際上，解決浮動的第二類方法都是和這一概念有關的，而且關於ie6的很多bug也是因為這個layout而產生的。

詳細的瞭解一下haslayout會讓你對於ie的一系列問題尤其是ie6bug會有更深的理解和更多的解決方案。

關於haslayout參考文章：

http://www.cnblogs.com/qiwenke/articles/2714559.html

http://www.cnblogs.com/qiwenke/articles/2714566.html

http://www.iyunlu.com/view/css-xhtml/55.html