Html 向左飘浮; vs 显示：内联；vs 显示：内联块；vs 显示：表格单元格；

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

提问by EGHDK

My Question(s)

我的问题

1. Are any of these methods preferred by a professional web designer?

2. Are any of these methods prefereed by a web browser when drawing the website?

3. Is this all just personal preference?

4. Are there other techniques I'm missing?

1. 专业网页设计师是否喜欢这些方法中的任何一种？

2. 绘制网站时，Web 浏览器是否首选这些方法中的任何一种？

3. 这一切只是个人喜好吗？

4. 我还缺少其他技术吗？

Note: Above questions are in regards to designing a multi-column layout

注意：以上问题是关于设计多列布局的

---

---

float:left;

向左飘浮;

http://jsfiddle.net/CDe6a/

http://jsfiddle.net/CDe6a/

This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both;afterwards. Another conthat I just found was the inability to align text vertically.

这是我在创建列布局时总是使用的方法，它似乎工作得很好。但是，父对象确实会自行崩溃，因此您只需要在clear:both;事后记住。我刚刚发现的另一个缺点是无法垂直对齐文本。

display:inline;

显示：内联；

This seems to correct the problem of the collapsing parent, but adds whitespace.

这似乎纠正了折叠父级的问题，但增加了空格。

http://jsfiddle.net/CDe6a/1/

http://jsfiddle.net/CDe6a/1/

Removing whitespace from html seems to be the easiest fix this problem, but is not desired if you are really picky about your html.

从 html 中删除空格似乎是解决此问题的最简单方法，但如果您对 html 非常挑剔，则不需要。

http://jsfiddle.net/CDe6a/2/

http://jsfiddle.net/CDe6a/2/

display:inline-block;

显示：内联块；

Seems to behave exactly like display:inline;.

似乎表现得一模一样display:inline;。

http://jsfiddle.net/CDe6a/3/

http://jsfiddle.net/CDe6a/3/

display:table-cell;

显示：表格单元格；

http://jsfiddle.net/CDe6a/4/

http://jsfiddle.net/CDe6a/4/

Works perfect.

工作完美。

My thoughts:

我的想法：

I'm sure I'm missing a ton of stuff, like certain exceptions that will break the layout but, display:table-cell;seems to work the best, and I think I will start replacing float:left;as I always seem to mess up on clear:both;. I've read many articles and blogs about this on the web, but none of them give me a definite answer on what I should use when laying out my website.

我确定我遗漏了很多东西，比如某些会破坏布局的例外，但display:table-cell;似乎效果最好，我想我会开始更换，float:left;因为我似乎总是把clear:both;. 我在网上阅读了很多关于这方面的文章和博客，但没有一篇给我一个明确的答案，告诉我在布置我的网站时应该使用什么。

采纳答案by Spudley

Of the options you asked about:

在您询问的选项中：

• float:left;
  I dislike floats because of the need to have additional markup to clear the float. As far as I'm concerned, the whole floatconcept was poorly designed in the CSS specs. Nothing we can do about that now though. But the important thing is it does work, and it works in all browsers (even IE6/7), so use it if you like it.

• float:left;
  我不喜欢浮动，因为需要额外的标记来清除浮动。就我而言，整个float概念在 CSS 规范中设计得很差。不过，我们现在对此无能为力。但重要的是它确实有效，并且适用于所有浏览器（甚至 IE6/7），所以如果您喜欢它，请使用它。

The additional markup for clearing may not be necessary if you use the :afterselector to clear the floats, but this isn't an option if you want to support IE6 or IE7.

如果您使用:after选择器清除浮动，则可能不需要额外的清除标记，但如果您想支持 IE6 或 IE7，这不是一个选项。

• display:inline;
  This shouldn't be used for layout, with the exception of IE6/7, where display:inline; zoom:1is a fall-back hack for the broken support for inline-block.

• display:inline-block;
  This is my favourite option. It works well and consistently across all browsers, with a caveat for IE6/7, which support it for some elements. But see above for the hacky solution to work around this.

• display:inline;
  这不应该被用于布局，IE6 / 7，其中的例外display:inline; zoom:1是回退黑客用于破碎支持inline-block。

• display:inline-block;
  这是我最喜欢的选择。它在所有浏览器上都运行良好且一致，但对 IE6/7 有一个警告，IE6/7 支持某些元素。但请参阅上面的 hacky 解决方案来解决这个问题。

The other big caveat with inline-blockis that because of the inline aspect, the white spaces between elements are treated the same as white spaces between words of text, so you can get gaps appearing between elements. There are work-arounds to this, but none of them are ideal. (the best is simply to not have any spaces between the elements)

另一个重要的警告inline-block是，由于内联方面，元素之间的空格与文本单词之间的空格被视为相同，因此您可能会在元素之间出现间隙。有一些解决方法，但没有一个是理想的。（最好是元素之间没有任何空格）

• display:table-cell;
  Another one where you'll have problems with browser compatibility. Older IEs won't work with this at all. But even for other browsers, it's worth noting that table-cellis designed to be used in a context of being inside elements that are styled as tableand table-row; using table-cellin isolation is not the intended way to do it, so you may experience different browsers treating it differently.

• display:table-cell;
  另一个你会遇到浏览器兼容性问题的地方。较旧的 IE 根本无法使用此功能。但即使对于其他浏览器，值得注意的table-cell是，它被设计为在样式为tableand 的元素内部的上下文中使用table-row；单独使用table-cell不是这样做的预期方式，因此您可能会遇到不同的浏览器对其进行不同的处理。

Other techniques you may have missed? Yes.

您可能错过的其他技术？是的。

• Since you say this is for a multi-column layout, there is a CSS Columns featurethat you might want to know about. However it isn't the most well supported feature (not supported by IE even in IE9, and a vendor prefix required by all other browsers), so you may not want to use it. But it is another option, and you did ask.

• There's also CSS FlexBox feature, which is intended to allow you to have text flowing from box to box. It's an exciting feature that will allow some complex layouts, but this is still very much in development -- see http://html5please.com/#flexbox

• 由于您说这是用于多列布局，因此您可能想了解一个CSS 列功能。然而，它并不是最受支持的功能（即使在 IE9 中也不被 IE 支持，并且所有其他浏览器都需要供应商前缀），因此您可能不想使用它。但这是另一种选择，你确实问过。

• 还有 CSS FlexBox 功能，旨在允许您让文本从一个盒子流到另一个盒子。这是一个令人兴奋的功能，将允许一些复杂的布局，但这仍在开发中——请参阅http://html5please.com/#flexbox

Hope that helps.

希望有帮助。

回答by Lie Ryan

I usually use float: left;and add overflow: auto;to solve the collapsing parent problem(as to why this works, overflow: autowill expand the parent instead of adding scrollbars if you do not give it explicit height, overflow: hiddenworks as well). Most of the vertical alignment needs I had are for one-line of text in menu bars, which can be solved using line-heightproperty. If I really need to vertical align a block element, I'd set an explicit height on the parent and the vertically aligned item, position absolute, top 50%, and negative margin.

我通常使用float: left;和 addoverflow: auto;来解决折叠父级问题（至于为什么会这样，overflow: auto如果不给它明确的高度，将扩展父级而不是添加滚动条，overflow: hidden也可以）。我遇到的大多数垂直对齐需求都是针对菜单栏中的一行文本，可以使用line-height属性来解决。如果我真的需要垂直对齐一个块元素，我会在父元素和垂直对齐的项目上设置一个明确的高度、绝对位置、前 50% 和负边距。

The reason I don't use display: table-cellis the way it overflows when you have more items than the site's width can handle. table-cell will force the user to scroll horizontally, while floats will wrap the overflow menu, making it still usable without the need for horizontal scrolling.

我不使用的原因display: table-cell是当你有更多的项目超过网站的宽度可以处理时它溢出的方式。table-cell 将强制用户水平滚动，而浮动将包裹溢出菜单，使其仍然可用而无需水平滚动。

The best thing about float: left and overflow: auto is that it works all the way back to IE6 without hacks, probably even further.

关于 float: left 和 overflow: auto 的最好的事情是它可以一直工作到 IE6 没有黑客攻击，甚至可能更远。

回答by Zendy

I'd say it depends on what you need it for:

我会说这取决于你需要它做什么：

1. If you need it just to get 3 columns layout, I'd suggest to do it with float.

2. If you need it for menu, you can use inline-block. For the whitespace problem, you can use few tricks as described by Chris Coyier here http://css-tricks.com/fighting-the-space-between-inline-block-elements/.

3. If you need to make a multiple choice option, which the width needs to spread evenly inside a specified box, then I'd prefer display: table. This will not work correctly in some browsers, so it depends on your browser support.

1. 如果您只需要它来获得 3 列布局，我建议使用float.

2. 如果你需要它作为菜单，你可以使用inline-block. 对于空白问题，您可以使用 Chris Coyier 在http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 中描述的一些技巧。

3. 如果您需要进行多项选择，宽度需要在指定框内均匀分布，那么我更喜欢display: table. 这在某些浏览器中无法正常工作，因此这取决于您的浏览器支持。

Lastly, what might be the best method is using flexbox. The spec for this has changed few times, so it's not stable just yet. But once it has been finalized, this will be the best method I reckon.

最后，最好的方法是使用flexbox. 这个规范已经改变了几次，所以它还不稳定。但是一旦确定下来，这将是我认为最好的方法。

回答by Chad

I prefer inline-block, although float is also useful. Table-cell isn't rendered correctly by old IEs (neither does inline-block, but there's the zoom: 1; *display: inlinehack that I use frequently). If you have children that have a smaller height than their parent, floats will bring them to the top, whereas inline-block will screw up sometimes.

我更喜欢 inline-block，虽然 float 也很有用。旧 IE 无法正确呈现表格单元格（内联块也没有，但有zoom: 1; *display: inline我经常使用的hack）。如果你的孩子的身高比他们的父母小，浮动会将他们带到顶部，而内联块有时会搞砸。

Most of the time, the browser will interpret everything correctly, unless, of course, it's IE. You always have to check to make sure that IE doesn't suck-- for example, the table-cell concept.

大多数情况下，浏览器会正确解释所有内容，当然，除非是 IE。您必须始终检查以确保 IE 不会出错——例如，表格单元概念。

In all reality, yes, it boils down to personal preference.

实际上，是的，这归结为个人喜好。

One technique you could use to get rid of white space would be to set a font-sizeof 0 to the parent, then give the font-sizeback to the children, although that's a hassle, and gross.

您可以用来摆脱空白的一种技术font-size是为父级设置0，然后将font-size返回给子级，尽管这很麻烦，而且很恶心。

回答by Wtower

For the record only, to add to Spudley's answer, there is also the possibility to use position: absoluteand margins if you know the column widths.

仅作为记录，要添加到 Spudley 的答案中，position: absolute如果您知道列宽，也可以使用和边距。

For me, the main issue when chossing a method is whether you need the columns to fill the whole height (equal heights), where table-cell is the easiest method (if you don't care much for older browsers).

对我来说，选择方法时的主要问题是您是否需要列填充整个高度（等高），其中 table-cell 是最简单的方法（如果您不太关心旧浏览器）。

回答by Alireza

I prefer inline-block, but floatare still useful way to put together HTML elemenets, specially when we have elements which one should stick to the left and one to the right, float working better with writing less lines, while inline-block working well in many other cases.

我更喜欢inline-block，但float仍然是将 HTML 元素组合在一起的有用方法，特别是当我们有元素应该坚持左侧和右侧时，浮动工作在编写更少的行时更好，而内联块在许多其他情况下工作良好.