通常，当我们想要在一行中有多个DIVs时，我们会使用float: left，但现在我发现了display:inline-block的技巧
示例链接在这里。在我看来，display:inline-block是align DIVs的一种更好的方式，但是有什么缺点吗?为什么这种方法不如float技巧受欢迎?
三个字:inline-block更好。
display: inline-block方法的唯一缺点是，在IE7及以下版本中，如果元素已经默认为inline，则只能显示inline-block。这意味着您必须使用<span>元素而不是使用<div>元素。这并不是一个很大的缺点，因为从语义上讲，<div>是用于划分页面的，而<span>只是用于覆盖页面的一个跨度，所以没有很大的语义差异。display:inline-block的一个巨大好处是，当其他开发人员在稍后维护您的代码时，display:inline-block和text-align:right试图完成的内容比float:left或float:right语句要明显得多。我最喜欢的inline-block方法的好处是，很容易使用vertical-align: middle, line-height和text-align: center来完美地将元素居中，以一种直观的方式。我在Mozilla博客上找到了一篇关于如何实现跨浏览器内联块的博文。这是浏览器的兼容性。
使用float方法不适合页面布局的原因是因为float CSS属性最初仅用于在图像(杂志样式)周围使用文本，并且根据设计，不适合一般页面布局目的。当稍后更改浮动元素时，有时会遇到定位问题，因为它们不在页面流中。另一个缺点是，它通常需要一个明确的修复，否则它可能会破坏页面的某些方面。clearfix需要在浮动元素之后添加一个元素，以阻止它们的父元素在它们周围折叠，这跨越了将样式与内容分开的语义线，因此是web开发中的反模式。
上述链接中提到的任何空白问题都可以通过white-space CSS属性轻松解决。
编辑:
SitePoint是一个非常可靠的网页设计建议来源，他们似乎和我有相同的意见:
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/如果你不熟悉CSS布局，你这样想是可以理解的以富有想象力的方式使用CSS浮动是一种高度的技能。如果你您可能已经阅读了尽可能多的CSS布局教程假设掌握浮点数是一种成人仪式。你会眼花缭乱的被它的独创性所震撼，被它的复杂性所震撼，你就会有所收获当你最终理解浮点数的工作原理时，你就会有成就感。
别被骗了。你被洗脑了。
2015更新- Flexbox是现代浏览器的一个很好的选择:
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
更多信息
2016年12月21日更新
Bootstrap 4正在删除对IE9的支持，因此正在从行中摆脱浮点数并完全Flexbox。
拉请求#21389
虽然我同意一般inline-block更好，但如果您使用百分比宽度来创建响应式网格(或者如果您想要像素完美的宽度)，还有一件事要考虑:
如果您使用inline-block栅格的总宽度为100%或接近100%，您需要确保您的HTML标记包含，列之间没有空白。
对于浮动，这不是您需要担心的事情-列浮动在任何空白或列之间的其他内容。这个问题的答案提供了一些很好的技巧，可以在不使代码难看的情况下删除HTML空白。
如果由于任何原因你不能控制HTML标记(例如一个限制性的CMS)，你可以尝试这里描述的技巧，或者你可能需要妥协，使用float代替inline-block。还有一些丑陋的CSS技巧只应该在极端情况下使用，比如在列容器上使用font-size:0;，然后在每个列中重新应用字体大小。
例如:
- 这是一个3列网格，宽度为33.3%，
float: left。它"只是工作"(但需要清除包装器)。 - 这是完全相同的网格，
inline-block。块之间的空白创建了一个固定宽度的空间，使总宽度超过100%，破坏了布局并导致最后一列下拉一行。 - 这是相同的网格，
inline-block和HTML列之间没有空白。它"只是工作"-但是HTML是丑陋的，你的CMS可能会强制某种美化或缩进它的HTML输出，使这在现实中难以实现。
如果你想对齐div像素精确，然后使用浮动。inline-block似乎总是要求你切掉几个像素(至少在IE中)
你可以在这里找到深入的答案。
但是总的来说，使用float你需要注意和照顾周围的元素和inline-block简单的方式来行元素。
谢谢
关于inline-block有一个特性可能不是很直接。也就是说，CSS中垂直对齐的默认值是baseline。这可能会导致一些意想不到的对齐行为。看这篇文章。
http://www.brunildo.org/test/inline-block.html相反，当你使用float:left时，div是相互独立的，你可以很容易地使用margin来对齐它们。