Html 在 CSS 中使用 display:inline-block vs float:left 的优点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15172520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Advantages of using display:inline-block vs float:left in CSS
提问by Ryan
Normally, when we want to have multiple DIVsin a row we would use float: left, but now I discovered the trick of display:inline-block
通常，当我们想要DIVs连续使用多个时，我们会使用float: left，但现在我发现了display:inline-block
Example link here.
It seems to me that display:inline-blockis a better way to alignDIVsin a row, but are there any drawbacks? Why is this approach less popular then the floattrick?
示例链接在这里。在我看来，这display:inline-block是一种更好alignDIVs的连续方式，但是有什么缺点吗？为什么这种方法不如float技巧那么受欢迎？
回答by Alex W
In 3 words: inline-blockis better.
三个字：inline-block更好。
Inline Block
内联块
The only drawback to the display: inline-blockapproach is that in IE7 and below an element can only be displayed inline-blockif it was already inlineby default. What this means is that instead of using a <div>element you have to use a <span>element. It's not really a huge drawback at all because semantically a <div>is for dividing the page while a <span>is just for covering a span of a page, so there's not a huge semantic difference. A huge benefit of display:inline-blockis that when other developers are maintaining your code at a later point, it is much more obvious what display:inline-blockand text-align:rightis trying to accomplish than a float:leftor float:rightstatement. My favorite benefit of the inline-blockapproach is that it's easy to use vertical-align: middle, line-heightand text-align: centerto perfectly center the elements, in a way that is intuitive. I found a great blog post on how to implement cross-browser inline-block, on the Mozilla blog. Here is the browser compatibility.
到唯一的缺点display: inline-block的方法是，在IE7和元素下面只能显示inline-block，如果它已经inline默认。这意味着<div>您必须使用<span>元素而不是使用元素。这根本不是一个很大的缺点，因为在语义上 a<div>用于划分页面而 a<span>仅用于覆盖页面的跨度，因此没有巨大的语义差异。一个巨大的好处display:inline-block是，当其他开发人员稍后维护您的代码时，display:inline-block与or语句text-align:right相比，更明显的是要完成什么和正在尝试完成什么。我最喜欢这种方法的好处是它易于使用，并且float:leftfloat:rightinline-blockvertical-align: middleline-heighttext-align: center以直观的方式完美地居中元素。我在Mozilla 博客上找到了一篇关于如何实现跨浏览器内联块的很棒的博客文章。这是浏览器兼容性。
Float
漂浮
The reason that using the floatmethod is not suited for layout of your page is because the floatCSS property was originally intended only to have text wrap around an image (magazine style)and is, by design, not best suited for general page layout purposes. When changing floated elements later, sometimes you will have positioning issues because they are not in the page flow. Another disadvantage is that it generally requires a clearfix otherwise it may break aspects of the page. The clearfix requires adding an element after the floated elements to stop their parent from collapsingaround them which crosses the semantic line between separating style from content and is thus an anti-pattern in web development.
使用该float方法不适合您的页面布局的原因是因为floatCSS 属性最初仅用于使文本环绕图像（杂志样式），并且从设计上讲，并不最适合一般页面布局目的。稍后更改浮动元素时，有时您会遇到定位问题，因为它们不在页面流中。另一个缺点是它通常需要清除修复，否则可能会破坏页面的各个方面。clearfix 需要在浮动元素之后添加一个元素，以阻止它们的父元素在它们周围折叠，这跨越了从内容分离样式之间的语义线，因此是 Web 开发中的反模式。
Any white space problems mentioned in the link above could easily be fixed with the white-spaceCSS property.
上面链接中提到的任何空白问题都可以通过white-spaceCSS 属性轻松解决。
Edit:
编辑：
SitePointis a very credible source for web design advice and they seem to have the same opinion that I do:
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.
如果您不熟悉 CSS 布局，您会认为以富有想象力的方式使用 CSS 浮动是技能的高度。如果您已经阅读了尽可能多的 CSS 布局教程，您可能会认为掌握浮动是一种通过仪式。你会为它的独创性所折服，为它的复杂性而惊叹，当你最终了解花车的工作原理时，你会获得一种成就感。
不要被愚弄。你被洗脑了
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
2015 Update - Flexbox is a good alternative for modern browsers:
2015 更新 - Flexbox 是现代浏览器的不错选择：
.container {
display: flex; /* or inline-flex */
}
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Dec 21, 2016 Update
2016 年 12 月 21 日更新
Bootstrap 4 is removing support for IE9, and thus is getting rid of floats from rows and going full Flexbox.
Bootstrap 4 正在取消对 IE9 的支持，因此正在摆脱行中的浮点数并使用完整的 Flexbox。
回答by user56reinstatemonica8
While I agree that in general inline-blockis better, there's one extra thing to take into account if you're using percentage widthsto create a responsive grid (or if you want pixel-perfect widths):
虽然我同意一般inline-block情况下更好，但如果您使用百分比宽度来创建响应式网格（或者如果您想要像素完美的宽度），还有一件额外的事情需要考虑：
If you're using inline-blockfor grids that total 100% or near to 100% width, you need to make sure your HTML markup contains no white space between columns.
如果您使用inline-block的是总宽度为 100% 或接近 100% 的网格，您需要确保您的 HTML 标记在列之间不包含空格。
With floats, this is not something you need to worry about - the columns float over any whitespace or other content between columns. This question's answers have some good tips on ways to remove HTML whitespace without making your code ugly.
对于浮动，这不是您需要担心的 - 列浮动在列之间的任何空白或其他内容上。这个问题的答案有一些很好的技巧，可以在不使代码变得丑陋的情况下删除 HTML 空格。
If for any reason you can't control the HTML markup (e.g. a restrictive CMS), you can try the tricks described here, or you might need to compromise and use floats instead of inline-block. There are also ugly CSS tricks that should only be used in extreme circumstances, like font-size:0;on the column container then reapply font size within each column.
如果由于任何原因您无法控制 HTML 标记（例如限制性 CMS），您可以尝试这里描述的技巧，或者您可能需要妥协并使用浮动而不是内联块。还有一些丑陋的 CSS 技巧应该只在极端情况下使用，比如font-size:0;在列容器上然后在每列内重新应用字体大小。
For example:
例如：
- Here's a 3-column grid of 33.3% width with
float: left. It "just works" (but for the wrapper needing to be cleared). - Here's the exact same grid, with
inline-block. The whitespace between blocks creates a fixed-width space which pushes the total width beyond 100%, breaking the layout and causing the last column to drop down a line. - Here' s the same grid, with
inline-blockand no whitespace between columns in the HTML. It "just works" again - but the HTML is uglier and your CMS might force some kind of prettification or indenting to its HTML output making this difficult to achieve in reality.
- 这是一个 33.3% 宽度的 3 列网格，带有
float: left. 它“正常工作”（但对于需要清除的包装器）。 - 这是完全相同的网格，带有
inline-block. 块之间的空白创建了一个固定宽度的空间，将总宽度推到 100% 以上，破坏布局并导致最后一列下拉一行。 - 这是相同的网格，
inline-block在 HTML 中的列之间没有空格。它再次“正常工作” - 但 HTML 更丑陋，您的 CMS 可能会强制对其 HTML 输出进行某种美化或缩进，这使得这在现实中难以实现。
回答by Vins
If you want to align the divwith pixel accurate, then use float. inline-blockseems to always requires you to chop off a few pixels (at least in IE)
如果要div与像素准确对齐，请使用浮动。inline-block似乎总是需要你砍掉几个像素（至少在 IE 中）
回答by abhijit
回答by Sydney
There is one characteristic about inline-block which may not be straight-forward though. That is that the default value for vertical-align in CSS is baseline. This may cause some unexpected alignment behavior. Look at this article.
内联块有一个特性，但可能并不直接。也就是说，CSS 中垂直对齐的默认值是基线。这可能会导致一些意外的对齐行为。看看这篇文章。
http://www.brunildo.org/test/inline-block.html
http://www.brunildo.org/test/inline-block.html
Instead, when you do a float:left, the divs are independent of each other and you can align them using margin easily.
相反，当您执行 float:left 时，div 彼此独立，您可以轻松地使用边距对齐它们。
