什麼時候要清除浮動

其實浮動float最開始出現的意義只是為了讓文字環繞圖片而已。但人們發現，如果想要三個塊級元素並排顯示，都給它們加個float來得會比較方便。但這樣做也會帶來問題......

我們希望看到這樣的效果：

但結果卻是這樣：

這個時候，我們就要清除浮動帶來的影響——父元素高度塌陷了。

這裡引用張鑫旭大神觀點：

撇開浮動的“破壞性”，浮動就是個帶有方位的display:inline-block屬性。

一目瞭然：如果我們給上面的三個綠顏色的方塊設定display:inline-block也能達到讓它們並排顯示的效果。並且父元素的高度也不會塌陷。只不過無法控制是居左還是居右，display:inline-block

來看看我們如何清除浮動

我們說的清除浮動是指清除由於子元素浮動帶來父元素高度塌陷的影響。

1. 為父元素設定高度
   為父元素定高，簡單粗暴，壞處不用多說吧，沒有人會這麼幹的...^_^

2. 在父元素的最後設定clear:both

   <div class="p">
        <div class="c"></div>
        <div class="c"></div>
        <div class="c"></div>
        <div style="clear:left;"></div>
    
    <!--冗餘的子元素-->
   </div>

   原理如下：
   當添加了最後一個冗餘元素（未設定clear:both）時；父元素和此冗餘元素的高度都為0，並且三個浮動的元素都浮在了它們的上方蓋住了它們（可以把它們看成PS中的圖層）。現在，給這個冗餘元素新增clear:both（clear屬性介紹），它便要躲開這三個浮動元素，因此，一直往下跑，直到沒有被浮動元素蓋住才停下來。而父元素看到這個子元素跑開了，自然想要包裹住它。
   

   
   加了clear後冗餘元素由位置1跑到了位置2

   
   這樣就能看到我們想要的結果了——父元素高度被撐開了。
   

   
   大功告成

   
   貌似不錯，不過似乎有點問題——我們有必要在頁面中新增這麼多沒有意義的冗餘元素嗎？顯然這樣太麻煩，而且不符合語義化。
   還好有

   偽元素，這裡我們使用::after。新增一個類fix：

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

   在我們需要清除浮動時，只需要給父元素追加fix類即可，既方便又符合語義化。
   當然，大神的fix類這麼寫：

   .fix::after { 
        content:""; 
        display:table; 
        clear:both;
   }

   大師手筆，看起來更清爽了......

3. 給父元素新增overflow:hidden
   這裡有必要了解一下BFC塊級格式化上下文，只說結論：

   建立了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與建立BFC， 它規定了內部的Block-level Box如何佈局，並且與這個獨立盒子裡的佈局不受外部影響，當然它也不會影響到外面的元素。它具有以下特徵：

   1. 內部的Box會在垂直方向，從頂部開始一個接一個地放置。
   2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加。
   3. 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
   4. BFC的區域不會與float box疊加。
   5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然。
   6. 計算BFC的高度時，浮動元素也參與計算。

   看到第六條，如獲至寶。只需給父元素建立塊級格式化上下文，就可以讓浮動的元素參與高度計算，這樣一來，父元素的高度就有了。
   不單單隻有給父元素新增overflow:hidden才可以建立塊級格式化上下文，下列方法都可以：

   • 浮動 (元素的 float不為 none）
   • 絕對定位元素 (元素的 position為 absolute 或 fixed)
   • 行內塊 inline-blocks (元素的 display: inline-block)
   • 表格單元格 (元素的 display: table-cell，HTML表格單元格預設屬性)
   • 表格標題 (元素的 display: table-caption，HTML表格標題預設屬性)
   • overflow的值不為 visible的元素
   • 彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)

   用overflow:hidden較多的原因是不會帶來其它的佈局問題。