半深刻了解float與inline-block

首先是兼容性

float的話徹底不用擔憂什麼瀏覽器都能兼容,是一個比較老的屬性了.

inline-block則在IE8以上(包括8)才能使用,查了下資料,其實IE5.5的時候就已經有inline-block了,只是實現不同,因此想要兼容低版本的IE就只能用額外的代碼

display:inline;  //強行不換行
zoom:1;          //  用來觸發hasLayout,有興趣深刻理解的猴子可自行了解

其次是對父親元素的影響

inline-block的話,沒什麼好說的,惟一要注意的就是每一個設置了inline-block的元素直接都會有空隙,能夠在父親元素裏設置

    font-size: 0;

來消除,不事後果是什麼你們都知道,不過我依然以爲這是最簡單暴力的方法,固然也有其餘方法,仍是請自行查找

float的話,設置了該屬性的元素會脫離文本流,也就是說和position:absolute同樣,不過對於同樣設置了該屬性的元素則不會.因此帶來的問題就是父親元素並不會隨着子元素的大小改變長寬,可是若是父親元素設置爲inline-block的話,則長寬會隨着子元素變化(前提是瀏覽器兼容inline-block,若是兼容的話我就直接用inline-block了~).

因此在不給父親元素設置inline-block屬性的時候就須要清除浮動.

在父親元素結束前最後一個浮動元素後.clear:both下(原理大概就是用一個有文本流的元素定位父親元素的大小),這樣父親元素的高度就會隨浮動元素改變

最後是一點其餘的小區別

基線:float和inline-block的基線不同

float的基線是浮動元素緊貼頂部

inline-block的基線是默認的基線,因此比較靈活能夠配合vertical-align.

最後的最後...就我的而言仍是喜歡用inline-block多點,用float的地方多數能夠用inline-block來代替,惟有當要圍繞某個元素時float是惟一的解決方法