通常，当我们想DIVs连续拥有多个时，可以使用float: left，但是现在我发现了display:inline-block
示例链接在这里。在我看来，这display:inline-block是一种更好align DIVs的连续方式，但是有什么缺点吗？为什么这种方法不那么流行float呢？
Answers:
3个字：inline-block更好。
内联块
到唯一的缺点display: inline-block的方法是，在IE7和元素下面只能显示inline-block，如果它已经inline默认。这意味着不必使用<div>元素，而必须使用<span>元素。这根本不是一个很大的缺点，因为语义a <div>是用于划分页面，而a <span>仅是用于覆盖页面的跨度，因此在语义上没有很大的区别。这样做的一个巨大好处display:inline-block是，当其他开发人员在稍后维护您的代码时，display:inline-block与or 语句text-align:right 相比，显而易见并且正在尝试完成什么。我最喜欢的方法好处是易于使用，并且float:leftfloat:rightinline-blockvertical-align: middleline-heighttext-align: center以直观的方式完美地将元素居中。我在Mozilla博客上找到了一篇很棒的博客文章，介绍如何实现跨浏览器的内联块。这是浏览器的兼容性。
浮动
使用该float方法不适合页面布局的原因是因为floatCSS属性最初仅打算将文本换成图片（杂志样式），并且设计上也不适合用于常规页面布局。以后更改浮动元素时，有时会遇到定位问题，因为它们不在页面流中。另一个缺点是，它通常需要一个clearfix，否则可能会破坏页面的某些方面。clearfix要求在浮动元素之后添加一个元素，以防止其父元素折叠起来，这越过了将样式与内容分离的语义线，因此是Web开发中的反模式。
上面链接中提到的任何空白问题都可以通过white-spaceCSS属性轻松解决。
SitePoint是网站设计建议的非常可靠的来源，他们似乎与我有相同的看法：
如果您不熟悉CSS布局，那么您会以为以想象力的方式使用CSS浮点数是技巧的高度，这是可以原谅的。如果您花了太多的CSS布局教程，那么您可能会认为掌握浮动知识是一种习惯。当您最终了解花车的工作原理时，您会被其独创性，复杂性所震惊，并会获得成就感。
不要上当。你被洗脑了。
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015年更新-Flexbox是现代浏览器的不错选择：
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
2016年12月21日更新
Bootstrap 4取消了对IE9的支持，因此摆脱了行中的浮点数，并使Flexbox完整化。
letter-spacing在CSS的其他地方进行自定义，它不会中断。
虽然我同意总体上inline-block会更好，但是如果您使用百分比宽度创建响应式网格（或者如果您想要像素完美的宽度），则需要考虑一件事：
如果您要使用inline-block总宽度为100％或接近100％的网格，则需要确保HTML标记的column之间没有空格。
使用浮点数时，您无需担心-列浮于列之间的任何空白或其他内容上。该问题的答案提供了一些在不使代码变得丑陋的情况下删除HTML空白的好技巧。
如果由于某种原因您无法控制HTML标记（例如，限制性CMS），则可以尝试此处介绍的技巧，或者您可能需要妥协并使用浮点数而不是内联块。还有一些丑陋的CSS技巧，仅应在极端情况下使用，例如font-size:0;在列容器上，然后在每列内重新应用字体大小。
例如：
float: left。它“工作正常”（但需要清除包装器）。inline-block。块之间的空白会创建一个固定宽度的空间，该空间会将总宽度推到100％以上，从而中断布局并导致最后一列下降一行。inline-blockHTML中的列之间没有空格。它可以再次“正常运行”-但是HTML较丑陋，您的CMS可能会对其HTML输出施加某种修饰或缩进，从而使这实际上很难实现。div+(whitespace) {display:none}是什么之间的无空格？
<div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... 办？）
如果要div精确地将其与像素对齐，请使用float。inline-block似乎总是要求您切掉一些像素（至少在IE中）
* {padding:0px; margin:0px; }因为这有助于平衡我的编码
关于内联块，有一个特征可能并不直接。那就是CSS中垂直对齐的默认值为基线。这可能会导致某些意外的对齐行为。看这篇文章。
http://www.brunildo.org/test/inline-block.html
相反，当您执行float：left时，div彼此独立，您可以轻松地使用margin对齐它们。
inline不是inline-block。但在第一个相关的好：stackoverflow.com/a/11823622/918414