晚上做DEMO的時候遇到了這個問題，其實字面意義很明了：一個是display:inline把元素顯示為行內元素，float:left讓其脫離文檔流，浮動起來。但對其具體的用處和區別還是不解。
于是google一下，好像這個問題并不像其它問題一樣有很多博客轉載，但還是找到了一些可以參考的東西。
細看了下，網上僅有的一些資料都是轉載自這篇博文：http://andymao.com/andy/post/42.html。我也看了一下，但說實話只看懂了一半（可能是對標準化頁面的設計還了解得不夠深）。
于是動手做了一下實驗，一目了然：
例：
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;
}
結果：
第一個class為disp的UL里LI顯示為aaa,bbb為同一行，而asdfadsf則另起了一行。前兩個都均已經設為了行內元素。所以它們還是占著一行，下一個元素就另起了一行。
第二個class為 floa的UL里三個L均I顯示在同一行里，因為前兩個已經設為了float:left脫離了標準的文檔行，而下一個塊級元素，則忽略了前面的元素，而繼續按照標準的文檔進行排列。
最后摘抄一下，瀏覽到有用的資料：
首先我們要明確，display:inline;與float:left;正確含義。display:inline;(內聯)《CSS權威指南》中文字顯示：任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行布局”形式，這里的“行布局”的意思就是說其表現形式始終以行進行顯示。比如，我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重復，每一行下方都會有一條黑色的細線。如果是塊級元素那么所顯示的的黑線只會在塊的下方出現。
當然這看起來不像是display:inline;與float:left;的區別所在，但是當理解了float:left;的特性那么我們就清楚到底是怎么回事了。float:left;(左浮動)他使得指定元素脫離普通的文檔流而產生的特別的布局特性。并且FLOAT必需應用在塊級元素之上，也就是說浮動并不應用于內聯標簽。或者換句話來說當應用了FLOAT那么這個元素將被指定為塊級元素。
那么我們很清楚了，內聯(display:inline;)元素不能設置寬高，因為內聯屬于行布局，其特性是在一行里進行布局，所以不能被設定寬高。