前言：

       感覺是剛過春招，又要開始秋招，對於技術渣渣、學歷普通的我，憂愁再次降臨。開始準備秋招路途中……來溫故而知新，沉下心好好學習。貌似本人在清除浮動中第一次接觸clear:left/right，平時只用到clear:both，好像也只見到這個，這就尷尬了。

一、什麼是浮動，標準文件流又是個啥

       所謂的文件流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。並最終窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素。脫離文件流即是元素打亂了這個排列，或是從排版中拿走。

      當前所知的脫離文件流的方式有兩種：浮動和定位。

      在瞭解什麼是浮動之前，   首先要知道，div是塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。我們看看下面的效果：

      可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1後邊，因為div元素是獨佔一行的。以上這些理論，是指標準流中的div。無論多麼複雜的佈局，其基本出發點均是：“如何在一行顯示多個div元素”。

       顯然標準流已經無法滿足需求，這就要用到浮動。      

       浮動可以理解為讓某個div元素脫離標準文件流，漂浮在標準文件流之上，和標準文件流不是一個層次。

      例如，假設上圖中的div2左浮動（float:left），那麼它將脫離標準文件流，但div1、div3仍然在標準文件流當中，所以div3會自動向上移動，佔據div2的位置，重新組成一個流。如圖：

       從圖中可以看出，由於對div2設定左浮動(float:left;)，因此它不再屬於標準文件流，div3自動上移頂替div2的位置，div1、div3、div4依次排列，成為一個新的流。又因為浮動是漂浮在標準流之上的，因此div2擋住了一部分div3，div3看起來變“矮”了。
       這裡div2用的是左浮動(float:left;)，可以理解為漂浮起來後靠左排列，右浮動(float:right;)當然就是靠右排列。這裡的靠左、靠右是說頁面的左、右邊緣。
       如果我們把div2採用右浮動，會是如下效果：

         此時div2靠頁面右邊緣排列，不再遮擋div3，讀者可以清晰的看到上面所講的div1、div3組成的流。以上我們看到的是隻有一個div設定浮動，那麼如果設定多個div浮動，效果又是怎麼樣呢？

        我設定div2右浮動，div3左浮動，效果如下：

       同理，由於div2、div3浮動，它們不再屬於標準文件流，因此div4會自動上移，與div1組成一個“新”標準流，而浮動是漂浮在標準文件流之上，因此div2又擋住了div4。

       當同時對div2、div3設定浮動之後，div3會跟隨在div2之後，div2在每個例子中都是浮動的，但並沒有跟隨到div1之後。因此，我們可以得出一個重要結論：
       假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。

2、清除浮動

      目前民間流傳的清除浮動方法：

• clear語法：

• 取值：

        我第一次看到這個定義的想法是，clear: left認為是“清除左浮動”，clear: right是清除右浮動。 定義非常容易理解，但是讀者實際使用時可能會發現不是這麼回事。

       在理解這個之前，請先記住一句話：“float是魔鬼，會影響其他相鄰元素；但是clear是小白，其只會影響自身，不會對其他相鄰元素造成影響！”---來自張鑫旭

       根據上邊的基礎，我們來看一個簡單的例子，假如頁面中只有兩個元素div1、div2，它們都是左浮動，場景如下：

       此時div1、div2都浮動，根據規則，div2會跟隨在div1後邊，但我們仍然希望div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣。

       這時候就要用到清除浮動（clear），如果單純根據官方定義，讀者可能會嘗試這樣寫：在div1的CSS樣式中新增clear:right;，理解為不允許div1的右邊有浮動元素，由於div2是浮動元素，因此會自動下移一行來滿足規則。那我們來試一下剛才說的這個方法，結果還是原來的這個，並沒有起到效果，可見這種理解是錯誤的。

       所以呢，要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素，這樣div2就被迫下移一行。實踐效果如下：

         這樣就達到了效果，試想一下，如果兩個div都是右浮動，那麼要如何實現上下排列呢，也就是div2在div1的下面？

         可以看出div2的右邊有一個浮動元素div1，那麼我們可以在div2的CSS樣式中使用clear:right;來指定div2的右邊不允許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。

3、具體例子

       解析完了具體的理論知識，來進行實踐一下好了。假如現在需要完成下面的效果，大家想想你會用什麼佈局來實現呢？

       我的實現方法是，利用2個div，第一個div中包含頭像和姓名，第二個div中包含自我描述，然後第一個div左浮動，第二個div也是左浮動。雖然這種方法實現了這個效果，而且大家也都是這麼做的，但是這樣寫會顯得沒有那麼專業，首先這三個應該是屬於平級的，然而用我的實現方法來看，我們分成了2個級。那麼要如何用平級實現以上的效果，大家想想就知道啦，既然上文的內容是清除浮動，那麼就用這個實現。

     於是程式碼以及佈局如下：

<div style="width:500px;overflow:hidden;_zoom:1;">
    <div style="float:left;width:100px;">頭像</div>
    <p style="float:left;clear:left;">姓名</p>
    <div style="margin-left:106px;">自我描述</div>
 </div>