深入了解float與inline-block

這篇文章主要介紹了深入了解float與inline-block,分別從兼容性，對父元素的影響等方面進行了分析，推薦給小伙伴參考下

最近工作比較輕鬆,所以一直在寫自己的canvas庫..也沒啥好知識點寫博客,停滯了有2個月了吧.故今天決心花些時間來寫一篇css的博文,剛好最近專案寫介面的時候碰到這2個傢伙...所以就和大家一起來半深入的理解下
首先是兼容性

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是唯一的解決方法

以上是深入了解float與inline-block的詳細內容。更多資訊請關注PHP中文網其他相關文章！