晚上做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;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。