清除浮動

     浮動做爲網頁佈局的重要手段之一，給咱們帶來了諸多便利。但一些反作用也是值得咱們去注意的。一旦某個元素具備了float屬性以後就會脫離文檔流，形成一些意向不到的後果。咱們來看這麼一個例子：

<div id="outer">
    <div id="left"></div>
    <div id="right"></div>
</div>

     設置其樣式，分別對內部的兩個div採用左浮動和右浮動，並對外面的盒子設置背景色和邊框，設置這樣的樣式咱們是期：外部盒子的高度隨內部自適應爲200px，含有紅色背景和黑色邊框：

 #left{width:200px;height:200px;background-color:gray;float:left;}
 #right{width:100px;height:200px;background-color: yellow;float:right;}
 #outer{background-color:red;border:1px solid black;}

咱們看一下最終結果：

     很明顯結果很讓咱們失望，外部盒子不只高度沒達到咱們指望的自適應，並且背景也不存在，只留下孤零零的邊框獨自淒涼。這是爲何了？不是說內部盒子能夠撐開外部盒子嘛？

     這就是浮動惹的禍了。由於浮動使得內部的兩個div脫離了正常的文檔流，再也不佔用原文檔流的空間。也就意味着再也不對外部包圍他們的盒子產生任何影響，裏面的高度對外面盒子無影響。外面盒子沒了高度，背景色沒有了依附沒法顯示。只有邊框勉爲其難，那怎麼解決了？首先想到的就是給外面盒子設置高度。當這個高度設置多少合適了？若是裏面的高度各異了？這顯然不是解決問題的根本之道。

     問題出在哪裏，咱們就應該在那裏解決問題。是浮動存在使得咱們達不到指望的結果，咱們就應該清除浮動，怎麼清除，下文會一一道來。

1）額外標籤法

    第一個，也是W3C推薦的方法就是使用額外標籤的辦法。這種方法就是在內容的末尾增長一個空的標籤，並清除其先後的浮動。典型的作法就是使用<br style="clear:both;" />或者使用<div style="clear:both;"></div>。這種辦法經過增長一個HTML元素並清除其兄弟元素的浮動，迫使外部容器撐開。不過這個辦法會增長額外的標籤。

2）使用overflow

    使用overflow屬性。此方法有效地解決了經過空標籤元素清除浮動而不得不增長無心代碼的弊端。使用該方法是隻需在須要清除浮動的元素(通常爲外部的盒子)中定義CSS屬性：overflow:auto或者overflow:hidden，便可！"zoom:1"用於兼容IE6。

3）使用僞元素選擇器after

    使用after僞對象清除浮動。使用after僞元素和內容聲明在指定的外部盒子後面添加內容(好比一個點)，而後再利用它來清除浮動。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置height:0，不然該元素會比實際高出若干像素；2、content屬性是必須的。具體代碼以下：

#outer:after{content:.;visibility:hidden;display:block;clear:both;height:0px;}

清除浮動後的結果以下：

     固然方法各有利弊，簡單的說，空標籤引入額外的元素，overflow可能對佈局帶來一些不可預知的問題，after僞元素代碼複雜。使用的時候取決於我的喜愛吧。