使用 display 的优点: inline-block vs float: left in CSS

小开

你可以在深度给你中找到答案。

但是通常使用 float时，您需要注意并关注周围的元素和 inline-block简单的行元素方法。

谢谢

小开

三个字: inline-block更好。

嵌入式块

display: inline-block方法的唯一缺点是，在 IE7及其以下版本中，如果默认情况下某个元素已经是 inline，那么它只能显示为 inline-block。这意味着不使用 <div>元素，而必须使用 <span>元素。这其实并不是一个很大的缺点，因为从语义上讲，<div>是用来划分页面的，而 <span>只是用来覆盖一个页面的跨度，所以没有很大的语义差异。display:inline-block的一个巨大好处是，当其他开发人员稍后维护您的代码时，与 inline-block0或 inline-block1语句相比，display:inline-block和 text-align:right试图完成的工作要明显得多。我最喜欢的 inline-block方法的好处是，它很容易使用 inline-block3，inline-block4和 inline-block5完美中心的元素，以一种直观的方式。我在 inline-block6上发现了一篇关于如何实现跨浏览器内联块的博客文章。这是 inline-block7。

漂浮

使用 float方法不适合页面布局的原因是因为 float CSS 属性最初的目的只是让文字包围图像(杂志风格)，而且从设计上来说，它不是最适合一般页面布局目的的。稍后更改浮动元素时，有时会出现定位问题，因为它们是不在页面流中。另一个缺点是，它通常需要一个清除，否则它可能会破坏页面的方面。Clearfix 需要在浮动元素之后添加一个元素，以停止它们周围的父母免于崩溃，这跨越了将样式与内容分离的语义线，因此是 Web 开发中的反模式。

上面链接中提到的任何空白问题都可以通过 white-space CSS 属性轻松解决。

编辑:

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

小开

如果您想使 div的像素精确对齐，那么使用 float。inline-block似乎总是要求你去掉几个像素(至少在 IE 中)

小开

虽然我同意一般来说 inline-block更好，但是在创建一个响应式网格(或者如果你想要像素完美的宽度)时，还有一件额外的事情需要考虑到 如果使用百分比宽度:

如果对总宽度为100% 或接近100% 的网格使用 inline-block，则需要确保 HTML 标记包含 柱子之间没有空白。

对于浮点数，这不是您需要担心的事情——列在列之间的任何空格或其他内容上浮动。这个问题的答案有一些很好的技巧，关于如何在不使代码难看的情况下删除 HTML 空白.

如果由于某种原因您无法控制 HTML 标记(例如限制性 CMS) ，您可以尝试这里描述的技巧，或者您可能需要妥协并使用 float 而不是 inline-block。也有丑陋的 CSS 技巧，应该只在极端情况下使用，如然后在每个列中重新应用字体大小。

例如:

这是一个3列的网格，宽度为33.3% ，带有 float: left 。
这是完全相同的网格，带有 inline-block 。块之间的空白创建了一个固定宽度的空间，使总宽度超过100% ，打破了布局，导致最后一列下拉一行。
这是相同的网格，使用 inline-block，HTML 中的列之间没有空格。它“只是再次工作”-但 HTML 是丑陋的，您的 CMS 可能会强制某种形式的美化或缩进到其 HTML 输出，使这在现实中难以实现。

小开

但是，内联块有一个特征可能不是直截了当的。也就是说，CSS 中垂直对齐的默认值是基线。这可能会导致一些意外的对齐行为。看看这篇文章。

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

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