使用display的好处：inline-block vs float：留在CSS中
通常情况下，当我们想在一行中有多个DIVs ，我们可以使用float: left ，但现在我发现了display:inline-block
示例链接在这里 。 在我看来， display:inline-block是连续align DIVs的更好方法，但是有什么缺点吗？ 为什么这种方法比float技巧更不受欢迎？
用3个词来表示： inline-block更好。
内联块
显示的唯一缺点是display: inline-block方法是，在IE7及以下版本中，如果元素默认已经inline ，则只能显示inline-block 。 这意味着，不要使用<div>元素，而必须使用<span>元素。 这并不是一个真正的巨大的缺点，因为在语义上，一个<div>是用来分割页面的，而一个<span>只是用来覆盖一个页面的跨度，所以没有很大的语义差异。 display:inline-block一个巨大的好处是display:inline-block是当其他开发人员在稍后维护你的代码的时候，显示的内容就更加明显display:inline-block和text-align:right正在试图完成比float:left或者float:right语句。 inline-block方法的最大好处是可以很直观地使用vertical-align: middle ， line-height和text-align: center来完美地居中text-align: center元素。 我在Mozilla博客上发现了一篇关于如何实现跨浏览器内联块的好博客文章 。 这是浏览器的兼容性 。
浮动
使用float方法的原因不适合页面的布局，因为float CSS属性最初只是为了在图像（杂志风格）上进行文本环绕，并且在devise上并不适合于一般的页面布局。 稍后更改浮动元素时，有时会遇到定位问题，因为它们不在页面stream中 。 另一个缺点是它通常需要一个clearfix，否则它可能会破坏页面的各个方面。 clearfix需要在浮动元素之后添加一个元素，以阻止父元素围绕它们跨越分离样式和内容之间的语义线而折叠 ，从而成为Web开发中的反模式 。
在上面的链接中提到的任何空白问题可以很容易地用white-space CSS属性来解决。
编辑：
SitePoint是一个非常可靠的网页devisebuild议的来源，他们似乎有同样的观点，我做的：
如果你是CSS布局的新手，你会被原谅，认为使用CSS漂浮在想象力的方式是技能的高度。 如果你已经消耗了尽可能多的CSS布局教程，你可能会认为掌握浮动是一个成功的过程。 当你终于明白浮游物是如何工作的时候，你会被这种复杂的智慧所震惊，你会感到成就感。
不要被愚弄。 你被洗脑了。
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015更新 – Flexbox是现代浏览器的不错select ：
.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更好，但如果使用百分比宽度来创build响应式网格（或者如果您想要像素完美的宽度），还有一件事要考虑：
如果您使用inline-block来填充100％或接近100％宽度的网格，则需要确保您的HTML标记在列之间不包含空格 。
有了浮动，这不是你需要担心的 – 列悬浮在列之间的任何空白或其他内容。 这个问题的答案有一些很好的技巧，以消除HTML空白，而不会让你的代码丑陋 。
如果由于某种原因无法控制HTML标记（例如限制性CMS），您可以尝试这里描述的技巧，或者您可能需要妥协并使用浮动内容而不是内联块。 也有丑陋的CSS技巧，只能在极端的情况下使用，如font-size:0; 然后在列容器上重新应用每列中的字体大小 。
例如：
- 这是一个33.3％宽度的3列网格，其中
float: left。 它“只是工作”（但包装需要清除）。 - 这是完全一样的网格，
inline-block。 块之间的空格创build一个固定宽度的空间，将总宽度推到100％以上，打破布局并导致最后一列下降一行。 - 这里是同一个网格，HTML中的列之间没有
inline-block，也没有空白 。 它“再次运作” – 但HTML是丑陋的，你的内容pipe理系统可能会强制对其HTML输出进行某种forms的修饰或缩进，这使得现实难以实现。
如果你想对准像素准确的div ，然后使用浮动。 inline-block似乎总是要求你砍掉几个像素（至less在IE中）
你可以在这里find答案。
但是一般来说， float需要注意并关心周围的元素，并用inline-block简化线元素。
谢谢
内联块有一个特性，可能不是直截了当的。 这就是CSS中vertical-align的默认值是基线。 这可能会导致一些意外的alignment行为。 看这篇文章。
http://www.brunildo.org/test/inline-block.html
相反，当你做一个float：left时，这个div是相互独立的，你可以很容易地使用margin来alignment它们。
