最近工做比較輕鬆,因此一直在寫本身的canvas庫..也沒啥好知識點寫博客,停滯了有2個月了吧.故今天決心花些時間來寫一篇css的博文,恰好最近項目寫界面的時候碰到這2個傢伙...因此就和你們一塊兒來半深刻的理解下
首先是兼容性css
float的話徹底不用擔憂什麼瀏覽器都能兼容,比較是一個很老的屬性了.canvas
inline-block則在IE8以上(包括8)才能使用,查了下資料,其實IE5.5的時候就已經有inline-block了,只是實現不同,因此想要兼容低版本的IE就只能用額外的代碼瀏覽器
display:inline; //強行不換行
zoom:1; // 用來觸發hasLayout,有興趣深刻理解的猴子可自行了解
其次是對父親元素的影響code
inline-block的話,沒什麼好說的,惟一要注意的就是每一個設置了inline-block的元素直接都會有空隙,能夠在父親元素裏設置博客
font-size: 0;
來消除,不事後果是什麼你們都知道,不過我依然以爲這是最簡單暴力的方法,固然也有其餘方法,仍是請自行查找it
float的話,設置了該屬性的元素會脫離文本流,也就是說和position:absolute同樣,不過對於同樣設置了該屬性的元素則不會.因此帶來的問題就是父親元素並不會隨着子元素的大小改變長寬,可是若是父親元素設置爲inline-block的話,則長寬會隨着子元素變化(前提是瀏覽器兼容inline-block,若是兼容的話我就直接用inline-block了~).io
因此在不給父親元素設置inline-block屬性的時候就須要清除浮動.class
在父親元素結束前最後一個浮動元素後.clear:both下(原理大概就是用一個有文本流的元素定位父親元素的大小),這樣父親元素的高度就會隨浮動元素改變兼容性
最後是一點其餘的小區別
基線:float和inline-block的基線不同
float的基線是浮動元素緊貼頂部
inline-block的基線是默認的基線,因此比較靈活能夠配合vertical-align.
最後的最後...就我的而言仍是喜歡用inline-block多點,用float的地方多數能夠用inline-block來代替,惟有當要圍繞某個元素時float是惟一的解決方法