css - 使用显示 :inline-block vs float:left in CSS 的优点

Question

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

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

Answer 1

三个字:inline-block更好。

内联 block

display: inline-block 的唯一缺点做法是IE7及以下只能显示一个元素inline-block如果它已经是 inline默认。这意味着不是使用 <div>元素你必须使用 <span>元素。这根本不是一个很大的缺点，因为语义上是 <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 blog 上找到了一篇关于如何实现跨浏览器内联 block 的很棒的博客文章。 .这是 browser compatibility .

float

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

上面链接中提到的任何空白问题都可以使用 white-space 轻松修复CSS 属性。

编辑:

SitePoint是一个非常可靠的网页设计建议来源，他们似乎和我有相同的观点:

If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.

Don’t be fooled. You’re being brainwashed.

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

2015 年更新 - Flexbox 是 modern browsers 的一个很好的替代品:

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

More info

2016 年 12 月 21 日更新

Bootstrap 4 正在删除对 IE9 的支持，因此从行中删除 float 并使用完整的 Flexbox。

Pull request #21389