CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
终极——浮动布局更好的替代方案。
要注意，本文的布局专指列表布局。就是具有相同DOM结构的水平排列可以repeat出来的列表元素。
列表浮动布局——float:left
对于浮动局部的局限性，就是每个列表元素的高度必须要一致，否则就会参差不齐。
使用浮动布局还需要修复其带来的副作用——高度塌陷的问题，也就是常提到的“清除浮动”了。
不过从国内领先网站的列表布局情况来看，貌似浮动布局还是扎根很深的（这回在列表布局上，人人网让我刮目了一把）。
三、提一提表格布局
在表格布局时代，我们基本上不用担心列表元素高度不一会错位的问题，表格中的单元格(<td>标签)自动回等高关联，且水平列表项还包裹在<tr>等标签中，所以，不可能发生错位。所以，很正常的，我们会想到利用类似table属性的样式进行一些布局，例如display:table，display:table-row，display:table-cell等属性，对此我是建议您看看支付宝UED的“基于display:table的CSS布局”（原文地址挂了很久了，所以被我下了）一文，如果不是受制于IE6/7对这些display属性不支持，基于display:table的CSS布局定会大放异彩的。
如果想使用display:table的CSS布局来代替浮动布局，权衡来看，不见得有提高。好的地方在于，不要担心列表元素的高度不一，甚至自动等高。撇开兼容性不谈，其还有不足在于在后台循环输出时需要水平repeat下，然后再垂直repeat。既然这样，还不如使用浮动布局，因为在这种情况下，使用浮动也是可以不用担心高度不一的问题的，这就是facebook好友列表的做法（oh, 该死，facebook上不去，想截个图的）。所以，基本上，使用display:table的CSS布局来代替浮动布局是完全占据下风的。因而，这里就不瞎子点灯白费蜡了，如一丝寒意的秋风，轻轻带过。
四、另外一种display属性，display:inline-block
display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。可谓黑白通吃，左右逢源。
inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。关于line box模型，我在之前的“css行高line-height的一些深入理解及应用”第二部分提到了，以及前面“CSS float浮动的深入研究、详解及拓展(一)”一文的“浮动的破坏性”部分中做过比较详细的介绍。一言以蔽之，就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes，这个line box的高度由里面最高的元素决定。所以，即使inline-block属性的列表元素高度异常，撑开的是整个line boxes的高度，因而，不会与下一行的列表元素发生错位。如下面的我自己画得拙劣的示意图所示的：
根据一些前辈的说法，IE6/7不支持display:inline-block属性，只是可以让标签有类似于inline-block的属性，起初我也是接受这种说法的，不过后来又表示了怀疑，最近使用text-align:justify做测试的时候的一些样式表现证实了：确实IE6/7是不支持display:inline-block属性，只是让其表现的跟inline-block一样，尤其对于inline水平的元素，其表现度可以用perfect一词来形容了。
对于IE8+以及现代浏览器，直接使用：
{display:inline-block;}
就可以了，支持任意水平的元素。
对于不支持的IE6/7浏览器该怎么办呢？如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接：
{display:inline-block;}
就可以了，对于这两个浏览器，其功效与*zoom:1;是一样的。
如果是block水平的元素，例如li标签。则需要多点代码，目前我知道的方法有两个，如下所示：
li {display:inline-block;...}
li {display:inline;}
或者是：
li{display:inline; zoom:1;...}
block水平的inline-block化的元素与inline水平的在表现层又是有差异的，这个后面会谈到。
五、一点小阻挠：inline-block元素间的换行符空格间隙问题
炼整理一下，有如下一些结论：
» block水平的元素inline-block化后，IE6/7没有换行符间隙问题，其他浏览器均有；
» inline水平的元素inline-block后，所有主流浏览器都有换行符/空格间隙问题；
» font-size:0，去除换行符间隙，在IE6/7下残留1像素间隙，Chrome浏览器无效，其他浏览器都完美去除；
» letter-spacing负值可以去除所有浏览器的换行符间隙，但是，Opera浏览器下极限是间隙1像素，0像素会反弹，换行符间隙还原。