float 和 inline-block 的区别

相同点

1.float 和 display: inline-block 都可以做到让元素成一排排列，然后根据父
  元素的宽度自动换行到下一列。
2.都可以自由设置元素的宽高

区别

1、文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个
元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮
动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一
个元素跑到下面去。

2、水平位置（Horizontal position）：很明显你不能通过给父元素设置text-
align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父
元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对
父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关
系）。

3、垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对
齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元
素这种方法就不行了。这也是我倾向于inline-block的主要原因。

4、空白（Whitespace）：inline-block包含html空白节点。如果你的html中一
系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素
之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

5、IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问
题。这不是个大问题，但值得留意一下。