Inline-block是否可以代替float?
inline-block是display的属性值，float是属性表示浮动。所以本身是有区别的，但是在某些场景下inline-block来编排layout有更好的编写效率。而不需要如float一样去clear浮动。
在排列一系列相同功能块展示(display)布局时以前常用float这些功能块来实现自动排列展示,最后在clear浮动来确保父块的高度。使用float一般都能工作，不过不得不承认，它们用起来有时候没那么简单。不过现在用inline-block来做变的更简单，它能模拟一些float的功能。
inline-block不是什么新东西，只是在我们以往学习的很多资料里都使用float来布局。偶尔我们也会使用inline-block, 只是突然发现inline-block来布局也很方便。
那问题来了inline-block是否可以代替float?
网上有些文章来解释这个问题，本文引用参考Steven Bradley的<<should You use Inline-blocks as A substitute for floats?>>.
网址：http://vanseodesign.com/css/inline-blocks/
要解释这个问题，需要从以下几个方面来讲起。
1. 什么是inline-block?
2. Float和inline-block的区别
3. 什么时候使用float和什么时候使用inline-block
1. 什么是inline-block?
display属性值有inline;block;inline-block;none; 不同的element有默认的display属性。inline-block顾名思义，它有inlie和block的一些共同属性。
Block元素： 根据css的盒子模型它会形成box. 它们有width,height,padding, border,margin. 它们垂直堆砌。
inline元素: 它们并不会产生box；它们水平位置上一个挨着一个。对它们设置width,height是没有用的，它们的内容决定了width和height.
inline-block元素: 它们本身变现的为block元素，有width,height,padding, border, margin,内部本身形成一个盒子。但是元素之间又表现为inline元素，元素之间水平一个接着一个排列，而不像块元素一样垂直堆砌。
float元素也形成box, 但它们也是一个接着一个排列，而不是垂直堆砌，这点上与inline-block很像，也是有这篇原因的原因。这种inline on the outside, block on the inside（元素之间inline,元素内部block）的特性就是我们想要的效果。
2.Float和inline-block的区别
两者的区别可以从下面几个方面比较
- Document flow
- Horizontal position
- Vertical alignment
- Whitespace
- IE6 and IE7
首先是文档流，float元素从正常的文档流中移除，允许其他元素围绕着它。而inline-block元素在正常的文档流中。所以inline-block元素不需要clearfix以及不需要overflow:hidden.当然它也就不能通过clear强迫其他元素放置它下面，也不能让其他元素围绕着它。
其次是水平位置，float并不能通过text-align:center来将它放置在父元素水平中间。任何在其父元素中设置position相关的style都不会影响float元素。而inline-block元素的inline属性让其父元素来影响它的位置。
同样垂直对齐方面，inline-blocks元素默认安baseline对齐。而float按top对齐。inline-blocks可以设置对齐方式来改变其垂直对齐的方式。但对float元素却没办法改变。这点也是inline-blocks的优势。
再次是空白，对于inline-block元素在html书写时的空白会被认识并显示出来，在同一行的inline-blocks元素之间存在着空白，而同一行的float元素之间没有空白，相互紧贴。这点见下面的例子，见http://jsfiddle.net/CDe6a/2/ 和 http://jsfiddle.net/CDe6a/1/
解决空白的办法有几种方法，比如写html时保证inline-blocks元素之间没有换行，这虽然很简单，但是是反人类的行为，比较讨厌。或者使用负边距来实现，需要根据font-size来调整这个negative margin. 大约0.25em. 还有一种方法就是设置父元素的font-size大小为0，这个这个空白就是0，不占空间。然后还需要在为inline-block等子元素设置font-size. 这些css tricks方法都会在这篇文章中提到://css-tricks.com/fighting-the-space-between-inline-block-elements/。
最后IE6和IE7的支持情况，inline-blocks在两个版本上不完全支持。只有部分支持，这也是为什么之前的文章中多是使用float来布局，因为那时不支持。如果你仍然要支持这两个版本的浏览器，那需要找一些workaround. 不过现在这个时代或许已经到了不用考虑这两个浏览器的时候了。
3. 什么时候使用float和什么时候使用inline-block
既然都有优缺点，什么时候使用哪种方法比较适合？这都取决于你的设计以及你所想达到的效果。如果你希望文字围绕，毫无疑问使用float。如果你希望中间对齐那inline-block是更佳的选择。
所以需要控制位置对齐时使用inline-block. float会有下面的问题（因为它们不在正常的文档流中，不会自动清除行，而是悬浮围绕的方式）。
在设计一个图片网格的时候，使用float时上面的问题显然是不能接受的。这也是很多人开始转向inline-block的原因。如果图片的大小都一样的时候，使用float就不是个问题。但大部分情况下图片的大小都是不一样的。这时使用inline-block成了更好的选择。
最后还有一种情况使用inline-block或许也是更好的选择。那就是水平的Navigation导航。以前我们常用float 链接，并设置它们为block元素。现在将list-items元素设置为inline-block会更好。任何希望元素放置在一行或者多行的情况下，考虑使用inline-block都是不错的选择。