向左飘浮; vs display：inline; vs display：inline-block; vs display：table-cell;

Question

我的问题

1. 专业网页设计师是否更喜欢这些方法？

2. 在绘制网站时，是否有任何这些方法都是通过网络浏览器进行优化的？

3. 这只是个人偏好吗？

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

注意：以上问题涉及设计多栏布局

---

浮动：左

http://jsfiddle.net/CDe6a/



这是我在创建列布局时总是使用的方法，它似乎工作得很好。虽然父母确实崩溃了，所以你只需要记住clear:both;之后。我刚发现的另一个 con 是无法垂直对齐文本。

显示：内联;

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

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



从html中删除空格似乎是解决这个问题的最简单方法，但如果你真的对你的HTML很挑剔，那就不值得了。

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



显示：内联块;

似乎表现得与display:inline;完全相同。

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



显示：表细胞;

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



完美无缺。

我的想法：

我确定我错过了很多东西，比如某些例外情况会破坏布局，但display:table-cell;似乎效果最好，我想我会开始将float:left;替换为我似乎总是在clear:both;陷入困境。我在网上看过很多关于这个的文章和博客，但没有一个能给我一个明确的答案，说明我在布局网站时应该用什么。

Answer 1

您询问的选项中包含：

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

如果使用:after选择器清除浮点数，则可能不需要额外的清除标记，但如果要支持IE6或IE7，则不能选择此选项。

• display:inline;
  这不应该用于布局，IE6 / 7除外，其中display:inline; zoom:1是对inline-block支持破损的后备黑客攻击。

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

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

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

您可能错过的其他技巧？是

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

• 还有CSS FlexBox功能，旨在让您从一个框到另一个框的文本流动。这是一个令人兴奋的功能，它将允许一些复杂的布局，但这仍然处于开发阶段 - 请参阅http://html5please.com/#flexbox

希望有所帮助。

Answer 2

我通常使用float: left;并将overflow: auto;添加到solve the collapsing parent problem（至于为什么会这样做，overflow: auto会扩展父级而不是添加滚动条如果你不给它显式高度，overflow: hidden也可以。我所拥有的大部分垂直对齐需求都是one-line of text in menu bars，可以使用line-height属性来解决。如果我真的需要垂直对齐一个块元素，我会在父元素和垂直对齐的项目上设置一个显式高度，绝对位置，前50％和负边距。

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

关于float的最好的事情：左边和溢出：auto是它可以一直回到IE6而不是黑客攻击，甚至可能更进一步。

Answer 3

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

1. 如果您只需要3列布局，我建议您使用float。

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

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

最后，可能最好的方法是使用flexbox。这个规格改变了几次，所以它还不稳定。但是一旦完成，这将是我认为最好的方法。

Answer 4

我更喜欢内联块，尽管float也很有用。旧IE没有正确呈现表格单元格（内联块也没有，但是我经常使用的zoom: 1; *display: inline黑客）。如果你的孩子的身高比他们的父母要小，那么浮子将把它们带到顶部，而内联块有时会搞砸。

大多数情况下，浏览器会正确解释所有内容，当然，除非它是IE。你总是要检查以确保IE不会吮吸 - 例如，table-cell概念。

在所有现实中，是的，它归结为个人偏好。

你可以用来摆脱空白的一种技巧是将font-size 0设置为父级，然后将font-size反馈给孩子，虽然这很麻烦，但总的来说

Answer 5

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

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

Answer 6

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