Question

通常情况下，当我们希望连续使用多个DIVs时，我们会使用float: left，但现在我发现了display:inline-block

的技巧

示例链接here。在我看来，display:inline-block是连续align DIVs的更好方式，但有任何缺点吗？为什么这种方法不如float技巧那么受欢迎？

Answer 1

用3个字来说：inline-block更好。

内联阻止

display: inline-block方法的唯一缺点是，在IE7及以下版本中，如果元素默认为inline-block，则只能显示inline。这意味着您必须使用<div>元素，而不是使用<span>元素。这根本不是一个巨大的缺点，因为语义上<div>用于划分页面，而<span>仅用于覆盖页面的跨度，因此没有巨大的语义差异。 display:inline-block的一个巨大好处是，当其他开发人员稍后维护您的代码时，display:inline-block和text-align:right试图完成的事情要比{{1}更明显}或float:left声明。我最喜欢float:right方法的好处是，使用inline-block，vertical-align: middle和line-height可以很容易地以一种直观的方式将元素完美地居中。我在Mozilla blog上发现了一篇关于如何实现跨浏览器内联块的精彩博客文章。这是browser compatibility。

<强>浮

使用text-align: center方法不适合页面布局的原因是因为float CSS属性was originally intended only to have text wrap around an image (magazine style)并且在设计上并不是最适合一般页面布局的目的。稍后更改浮动元素时，有时您会遇到定位问题，因为它们are not in the page flow。另一个缺点是它通常需要一个clearfix，否则它可能会破坏页面的各个方面。 clearfix需要在浮动元素之后添加一个元素来阻止它们周围的parent from collapsing，它们跨越了分隔样式和内容之间的语义线，因此an anti-pattern in web development。

上面链接中提到的任何空白问题都可以使用float CSS属性轻松解决。

编辑：

SitePoint是一个非常可靠的网页设计建议来源，他们似乎和我有同样的看法：

如果您是CSS布局的新手，那么您可以原谅这一点   以富有想象力的方式使用CSS浮动技能是技能的高度。如果你   你可能已经消耗了尽可能多的CSS布局教程   假设掌握花车是一种通过仪式。你会感到眼花缭乱   通过聪明才智，对复杂性感到惊讶，你将获得一种感觉   当你终于明白花车是如何工作时的成就。

不要被愚弄。你被洗脑了。

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015年更新 - Flexbox是modern browsers 的理想选择：

white-space

More info

2016年12月21日更新

Bootstrap 4正在删除对IE9的支持，因此正在摆脱行中的浮动并运行完整的Flexbox。

Pull request #21389

Answer 2

虽然我同意一般inline-block更好，但如果您使用百分比宽度来创建响应式网格（或者如果您想要像素），还需要考虑一个额外的事情 - 完美宽度）：

如果您将inline-block用于总宽度为100％或接近100％的网格，则需要确保HTML标记包含列之间没有空格。

使用浮点数，这不是您需要担心的事情 - 列浮动在列之间的任何空格或其他内容上。 This question's answers have some good tips on ways to remove HTML whitespace without making your code ugly。

如果由于任何原因您无法控制HTML标记（例如限制性CMS），您可以尝试此处描述的技巧，或者您可能需要妥协并使用浮点数而不是内联块。还有一些丑陋的CSS技巧只能在极端情况下使用，例如font-size:0; on the column container then reapply font size within each column。

例如：

Here's a 3-column grid of 33.3% width with float: left。它“只是工作”（但需要清除包装）。

Here's the exact same grid, with inline-block。块之间的空白区域创建一个固定宽度的空间，将总宽度推到100％以上，打破布局并导致最后一列下拉一行。

Here' s the same grid, with inline-block and no whitespace between columns in the HTML。它“再次正常工作” - 但HTML更加丑陋，你的CMS可能会强制某种美化或缩进其HTML输出，这使得实际上难以实现。

Answer 3

如果要将div与像素精确对齐，请使用float。 inline-block似乎总是要求你切掉几个像素（至少在IE中）

Answer 4

您可以深入找到答案here。

但总的来说，float需要注意并照顾周围的元素和inline-block简单的线元素方法。

由于

Answer 5

有一个关于内联块的特性虽然可能不是直截了当的。也就是说CSS中vertical-align的默认值是baseline。这可能会导致一些意外的对齐行为。看看这篇文章。

http://www.brunildo.org/test/inline-block.html

相反，当你执行浮动时：左边，div是相互独立的，你可以很容易地使用边距对齐它们。

使用display的优点：inline-block vs float：在CSS中保留

5 个答案:

编辑：