關於佈局中float的常見問題及解決辦法

在網頁的佈局中，咱們常常要使用到float在進行元素的排版，那麼隨之而來的就是許多的問題，我的在開發過程當中最多見的問題主要就是兩種，一種是元素的浮動致使的佈局混亂的問題，另外一種是浮動後的盒子模型塌陷問題。

首先，要了解浮動就要先了解網頁佈局的原理。我的認爲，網頁在佈局的過程當中你能夠把它當作是一個三維立體的空間，常規流元素由於重力的緣由是在最底層依次按順序往下排，而absolute和float元素這些不佔用常規流的元素是脫離了重力漂浮在空中，可是它仍是屬於包含着它的盒子元素的。

那麼瞭解原理後其實兩個問題就能夠一塊兒解釋了。

元素浮動後，他失去了重力，同時它在地上的位置也沒有東西了，那麼父級元素就會認爲這裏沒有元素，然後面的元素也會擠過來，因此就會出現了咱們在平時佈局中碰到的兩種問題了，父級被擠壓，然後面的元素有一部分出如今了float元素原本的位置。既然咱們已經知道了問題的所在，那麼解決問題的方法其實也是很簡單的，就是告訴父級元素和後面的元素，我雖然浮起來了，可是這塊地仍是個人，大家不能佔用。

1、overflow方法，給父級元素一個overflow：hidden，設置高度值爲auto，在沒有明確高度限制的狀況下，那麼父級元素在隱藏超出他的元素是就會把浮動元素考慮在內，這樣就防止了盒子模型的塌陷，同時，既然盒子不塌陷了，那麼後續的元素就不能過來佔用float本來的位置，順便達成了清除浮動的目的，可是在實際的清除浮動過程當中overflow這種方法會出現許多不可預知的問題，因此不建議使用overflow清除浮動。附上官方對於overflow解決盒子塌陷問題的解釋：

由於overflow.hidden會觸發BFC。BFC 全稱是塊級排版上下文，用於對塊級元素排版，默認狀況下只有根元素（body)一個塊級上下文，可是若是一個塊級元素 設置了float:left，overflow:hidden或position:absolute樣式，就會爲這個塊級元素生成一個獨立的塊圾上下文，就像在window全局做用域內，聲明瞭一個function就會生成 一個獨立的做用域同樣，新開僻的BFC像是開僻了一個新的小宇宙，使這個塊圾元素內部的排版徹底獨立隔絕。獨立的塊級上下文能夠包裹浮動流，所有浮動子元素也不會引發容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內，因此不用清除浮動來撐起高度。

2、clearfix方法，這種方法在實際的使用過程當中使用的比較普遍，網上的將解析也比較全，這種方法的原理我認爲是使用clearfix後告訴後面的元素，前面的元素是浮動的，他們的位置是不能佔用的。固然這種方法在使用過程當中要注意clearfix添加的位置。clearfix是加在浮動元素的父級的class中，可是有時候會由於某些未知的緣由失效，此時，只須要一個空標籤（p、div這些均可以）設置class爲clearfix而且放在浮動元素的父級元素和下一站元素的中間便可，這也算是第三種方法的一個改進吧。

3、clear：both方法，其實就是第二種方法中使用空標籤的時候換一個class，而這個class中只須要一句話clear：both便可，不過在實際工做中我喜歡使用第二種裏面的空標籤方法多一點。

附：.clearfix:after { 
    content:""; 
    display:block; 
    height:0; 
    clear:both; 
} 
.clearfix {*zoom:1;}//兼容ie