談談css的float屬性

在咱們的工做中，許多人都用float來佈局，結果致使出現各類各樣的奇葩問題。其實咱們都用float作了許多不在他本職工做以內的事情，咱們仔細研究就會發現，目前全部的佈局方式均可以用其餘的css屬性，惟一一個實現不了的就是「文字環繞圖片」；因此說float的真正意義就是爲了實現「文字環繞圖片」，這是他最原始的做用

知道了浮動的本質後，咱們來談談浮動形成的問題和解決辦法

要清楚的瞭解浮動就要知道網頁佈局的原理。網頁佈局中，你能夠把他當作一個三維立體的空間，你面對這電腦屏幕能夠想象成你站在天空看着大地同樣，常規元素都會一個一個按順序排隊，可是position和float會使這些元素變成超人，他們能夠飛起來，漂浮起來。

元素浮動後，失去了重力，那他在地上的位置就沒有了，後面的元素天然而然就會擠上來，因此想要解決浮動的問題就要告訴父元素，我雖然漂浮起來了，可是這塊地仍是個人。

一、overflow方法: 給父繼一個overflow:hidden,那麼父級元素就會把浮動的元素考慮在內，這樣就阻止了盒子模型的塌陷問題

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

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

另外float跟display:inline-block; 一塊兒使用致使上下不能對齊等問題；因此建議你們少用float,合理利用各類html語義化標籤和屬性,這樣的兼容性更好。代碼更清晰