清除浮動的幾大方法

?對于剛接觸到html的一些人經常會用到浮動布局，但對于浮動的使用和清除浮動來說是大為頭痛的，在這里介紹幾個關于清除浮動的的方法。如果你說你要的就是浮動為什么要清除浮動的話，我就真的無言以對了，那你就當我沒說。

??? 關于我們在布局的時候，經常會用到浮動和定位，特別是涉及到寬高自適應的網站布局時，就經常會出現“誒！我父元素的盒子設置的樣式怎么不見了”，當你一按F12，在眾多代碼尋它千百遍之后，終于驀然回首時發現萬花叢中的那個盒子赫然顯示著高度為零，what，我的高度怎么為零？不是說好父元素可以靠子元素撐開么？這是什么情況，是不是我的智商有問題？是不是我不適合學這個？為什么別人的可以我的不行？是不是瀏覽器針對我？其實這種問題剛開始學這個的話每個人都會碰到，這就是典型的父元素高度塌陷問題，這問題主要歸根于你的子元素使用了浮動或者定位。

我們都知道，浮動和定位都是使元素脫離文檔流，簡單的一點講就是它在網頁上不占位置，不按照瀏覽器規定的順序來排列，它是漂浮于文檔流之上，當它子元素不占位置，父元素就相當于是一個空盒子。就好比一個氣球，一開始你吧氣球里面灌滿了水，氣球自然就撐開了，當你有時候有需求會把水倒到杯子里面，倒進杯子之后氣球后自然癟了。子元素就相當于水，父元素就相當于氣球，浮動和定位就相當于把水取出來單獨放一個容器，想要讓原來的氣球再撐起來，我們就需要把這個水再放回去，但是如果把水再倒進去就失去了把水放到杯子里的意義，所以現在只有一種方法就是連杯子一起放到氣球里面去，這個方法在網頁里面應用就是清除浮動。清除浮動有好多種，現在我們來談談清除浮動的幾種常見的方法（真正的現在才開始）。

第一種就是給父元素加上高度，或許有人會說了，你他嗎這是什么狗屁方法，能給高度我還用擔心父元素高度塌陷？不可否認的是這是最簡單的方法，你什么都不用做一個height:**px就解決了問題，但是這個方法對于那種寬高自適應或者流體布局的網站來說就跟沒說一樣，一個字“不能給”。面對這種不能給的我們也不是沒有辦法。

第二種方法是當子元素浮動的時候也給父元素增加浮動，但是這就會引起父元素的父元素高度塌陷，然后我們再給父元素的父元素增加浮動，于是父元素的父元素的父元素再次塌陷，然而我們需要繼續給父元素的父元素的父元素增加浮動。這樣加上就可可能影響到子元素的祖宗十八代了，所以這種方法只可以解決當前問題，可能會引發一串的麻煩，所以就不可取的。這是我們就需要的第三種方法。

第三種就是使用clear：both，clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，就是我們需要在兄弟元素上面增加，但兄弟元素不能是浮動的元素且必須是父元素里面最后的一個元素，但是如果子元素在同一排的話，就必須在末尾增加一個空元素來設置clear,這就增加了多余的代碼，并且IE6、IE7是不支持這個屬性的。并且這個在后期維護中將是噩夢，這是堅決不能忍受的。那么現在還有一種方法。

第四種是使用display：inline-block, 這種方法就不管你一排有多少子元素，都不需要給float，直接全部給個這個屬性，inline-block是給子元素轉換成行內塊，應該都知道行內塊是直接在一行內顯示的，所以自然不需要使用浮動了，不用浮動的話自然就沒有高度塌陷問題了，但是他會帶來兩個BUG，行內塊和其他元素之間會生成一個間隙，但是這個可以給父元素增加font-size：0來解決，還有另外一個問題就是，當行內塊里面沒有內容時，是按照盒子底部對齊來排列的，塊里面有內容的時候，行內塊是按照內容的底部對齊來排列，這時候我們就需要使用vertical-align來設置元素的對齊方式，如果一行內有多個元素的時候我們就需要全部設置此屬性，也就是說我們使用這個方法就要解決這個方法帶來的BUG，這個方法還有一個致命的問題，那就是IE6，IE7同樣是不兼容的。所以再牛逼的方法都逃不掉被IE6扼殺的命運。所以這個方法還不是很完美，那我們再找找看還有沒有辦法。

第五種則是給父元素增加overflow:hidden;當子元素浮動的時候，我們只需要給父元素增加一個overflow:hidden;我們應該知道這個是裁切超出盒子部分的內容，所以有人要問了，為什么這個也可以清楚浮動呢，這個就要牽扯到BFC了，所有能觸發BFC的屬性都可以解決高度塌陷問題，至于什么是BFC可以去百度查一下，但是這個方法就如第三種和第四種方法一樣當遇到萬惡的IE6、IE7我們也是game over的，還有一點就是當overflow碰到絕對定位和相對定位的時候也是GG的，這時候我們不要灰心，或許你會問，世界這么大難道就沒有能完美解決高度塌陷的方法么？現在我們來看看第六種方法。

第六種方法是我們常用的定位，當我們子元素使用浮動時，給父元素使用相對定位（position：absolute）或者固定定位（fixed）的時候，我們就可以解決高度塌陷問題。因為固定定位的話一般是在特殊情況下使用，所以我們用到的只有相對定位(absolute)，但是這個是有局限性的，只能清除浮動帶來的高度塌陷，如果子元素使用了相對定位，這個方法是沒有用的。這種方法雖然沒有像前幾種方法那樣涉及到兼容問題但是其局限性可見一斑。說到這里或許你們會面無表情的問，敢情你說了這么多都是廢話，難道沒有一個可以完美解決浮動的方法么？這個嘛……既然說道這了，現在就放出我們的大招，還真有一個辦法可以解決，這就是我們該提到的最后的一種方法。

這最后的一種方法就是偽類清除法，就是傳說種的萬能清除法，它可以兼容任何瀏覽器包括IE6，這個方法是這樣的：

.clear:after{

content:'''';

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;

}

.clear{zoom:1;}

看到上面的代碼應該都看的出來，這個是結合以上的所有方法而形成的，.clear是類名這個可以隨便取，但為了語義化才使用這個類名，雖然這個方法看起來很復雜，其實我們只需要在初始化里面加上這個樣式，當我們需要清除浮動時只需要在塌陷的那個元素多加一個類名clear就可以 了，看著復雜其實用起來很方便。

?