129

通常，当我们想要DIVs连续使用多个时，我们会使用float: left，但现在我发现了display:inline-block

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

4

5 回答 5

160

三个字：inline-block更好。

内联块

该方法的唯一缺点是，在 IE7 及以下版本中，只有默认情况下才能display: inline-block显示元素。这意味着你必须使用一个元素，而不是使用一个元素。这根本不是一个巨大的缺点，因为语义上 a用于划分页面，而 a仅用于覆盖页面的跨度，因此没有很大的语义差异。一个巨大的好处是，当其他开发人员稍后维护您的代码时，与or语句相比，要完成的内容和 尝试完成的内容要明显得多。我最喜欢这种方法的好处是它易于使用，并且inline-blockinline<div><span><div><span>display:inline-blockdisplay:inline-blocktext-align:rightfloat: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。

拉取请求 #21389

于 2013-03-02T18:27:39.180 回答
24

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

如果您使用inline-block总宽度为 100% 或接近 100% 的网格，则需要确保 HTML 标记在列之间不包含空白。

使用浮动，这不是您需要担心的事情 - 列浮动在列之间的任何空白或其他内容上。This question's answers 有一些关于如何删除 HTML 空白而不使您的代码丑陋的好技巧。

如果由于任何原因您无法控制 HTML 标记（例如，限制性 CMS），您可以尝试这里描述的技巧，或者您可能需要妥协并使用浮动而不是内联块。还有一些丑陋的 CSS 技巧只能在极端情况下使用，比如font-size:0;在列容器上然后在每列中重新应用字体大小。

例如：

于 2015-04-28T15:38:02.353 回答
4

如果要div精确对齐像素，请使用浮点数。inline-block似乎总是需要你砍掉几个像素（至少在 IE 中）

于 2014-01-17T03:45:37.320 回答
2

你可以在这里找到深入的答案。

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

谢谢

于 2013-03-02T08:55:38.877 回答
1

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

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

相反，当您执行 float:left 时，div 彼此独立，您可以使用边距轻松对齐它们。

于 2016-06-20T17:42:36.163 回答