display:inline-block与float

display:inline-block 既有行级元素的特性，也有块级元素的特性，所以在同一行，能设置宽高，margin，padding

inline-block和float的区别

虽然设置float跟设置inline-block有些特征相似，但二者的区别仍是很是明显的:

1. 文档流（Document flow）:float元素会脱离文档流，并使得周围元素环绕这个元素。而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对此属性部分支持。若是你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。

解决空白问题

1. 删除html中的空白：不要让元素之间换行。
2. 使用负边距：你能够用负边距来补齐空白。
3. 给父元素设置font-size:0：因为空白的宽度与font-size有关系，设置这个属性便可把空白的宽度设置为0.在实际使用的时候，你还须要给子元素从新设置font-size。

何时使用inline-block，何时使用float

取决于你的设计稿跟解决方法。若是你须要文字环绕容器，那浮动是不二选择。若是你须要居中对齐元素，inline-block是个好选择。

上图，把一系列元素设置了浮动，由于盒子二号宽度的关系，能够发现盒子五号被挤进去了（这些元素都脱离了文档流），这是图片排列中很常见的问题。

上面的块级元素被设置了inline-block。因为他们没有脱离文档流，因此元素不会被某个过长的列挤上来。

原文: https://www.w3cplus.com/css/inline-blocks.html © w3cplus.com