https://jsfiddle.net/zua3999u/2/
为什么使用inline-block，内容就和float元素不在一行了，而block却好好的.
有些浏览器不支持inline-block元素，比如IE，
inline-block放不下的时候, 就换行了...
你把内容删了点, 就在一行了...
一般来说, 用float就用float, 用inline-block就用inline-block, 不要混着用...
1）一个元素如果设置了float属性，那么其后续元素将会放在后位置显示，而不管这个元素是块级元素还是inline元素
2）设置display属性并不能改变元素的原有类型，inline还是inline，块级的还是块级的
3）display:inline-block,元素会接在inline元素后面像块级元素一样显示-不会发生折行，但和inline元素的区别在于当其包含块-也就是其父元素容器的宽度不能够显示其全部内容时-一行显示不全是，会把整块元素的向下移动一直到float元素的下方
4）而对于dispaly:block元素在float元素的边上就老老实实待着，宽度不高就折行显示增加块的高度
你的代码之所以会有所示的效果，就是一个宽度的问题，你把父元素设足够块，就可以看到所述的效果