晚上做DEMO的時(shí)候遇到了這個(gè)問題,其實(shí)字面意義很明了:一個(gè)是display:inline把元素顯示為行內(nèi)元素,float:left讓其脫離文檔流,浮動(dòng)起來。但對(duì)其具體的用處和區(qū)別還是不解。
于是google一下,好像這個(gè)問題并不像其它問題一樣有很多博客轉(zhuǎn)載,但還是找到了一些可以參考的東西。
細(xì)看了下,網(wǎng)上僅有的一些資料都是轉(zhuǎn)載自這篇博文:http://andymao.com/andy/post/42.html。我也看了一下,但說實(shí)話只看懂了一半(可能是對(duì)標(biāo)準(zhǔn)化頁面的設(shè)計(jì)還了解得不夠深)。
于是動(dòng)手做了一下實(shí)驗(yàn),一目了然:

例:
XHTML部分
<ul class="disp">
<li>aaa</li>
<li>bbb</li>
<p>asdfadsf</p>
</ul>

<ul class="floa">
<li>ccc</li>
<li>ddd</li>
<p>eweweew</p>
</ul>
CSS部分:
ul.disp li
{
display:inline;
}
ul.floa li
{
float:left;
}
結(jié)果:
第一個(gè)class為disp的UL里L(fēng)I顯示為aaa,bbb為同一行,而
asdfadsf則另起了一行。前兩個(gè)都均已經(jīng)設(shè)為了行內(nèi)元素。所以它們還是占著一行,下一個(gè)元素就另起了一行。
第二個(gè)class為 floa的UL里三個(gè)L均I顯示在同一行里,因?yàn)榍皟蓚€(gè)已經(jīng)設(shè)為了float:left脫離了標(biāo)準(zhǔn)的文檔行,而下一個(gè)塊級(jí)元素,則忽略了前面的元素,而繼續(xù)按照標(biāo)準(zhǔn)的文檔進(jìn)行排列。

最后摘抄一下,瀏覽到有用的資料:

首先我們要明確,display:inline;與float:left;正確含義。display:inline;(內(nèi)聯(lián))《CSS權(quán)威指南》中文字顯示:任何不是塊級(jí)元素的可見元素都是內(nèi)聯(lián)元素。其表現(xiàn)的特性是“行布局”形式,這里的“行布局”的意思就是說其表現(xiàn)形式始終以行進(jìn)行顯示。比如,我們?cè)O(shè)定一個(gè)內(nèi)聯(lián)元素border-bottom:1px solid #000;時(shí)其表現(xiàn)是以每行進(jìn)行重復(fù),每一行下方都會(huì)有一條黑色的細(xì)線。如果是塊級(jí)元素那么所顯示的的黑線只會(huì)在塊的下方出現(xiàn)。

當(dāng)然這看起來不像是display:inline;與float:left;的區(qū)別所在,但是當(dāng)理解了float:left;的特性那么我們就清楚到底是怎么回事了。float:left;(左浮動(dòng))他使得指定元素脫離普通的文檔流而產(chǎn)生的特別的布局特性。并且FLOAT必需應(yīng)用在塊級(jí)元素之上,也就是說浮動(dòng)并不應(yīng)用于內(nèi)聯(lián)標(biāo)簽。或者換句話來說當(dāng)應(yīng)用了FLOAT那么這個(gè)元素將被指定為塊級(jí)元素。

那么我們很清楚了,內(nèi)聯(lián)(display:inline;)元素不能設(shè)置寬高,因?yàn)閮?nèi)聯(lián)屬于行布局,其特性是在一行里進(jìn)行布局,所以不能被設(shè)定寬高。