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

我的问题

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

2. 绘制网站时，Web浏览器是否会首选这些方法？

3. 这仅仅是个人喜好吗？

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

注意：以上问题与设计多列布局有关

向左飘浮;

http://jsfiddle.net/CDe6a/

这是我在创建列布局时始终使用的方法，并且似乎工作得很好。父母确实会自己崩溃，所以您只需要记住clear:both;之后即可。我刚刚发现的另一个缺点是无法垂直对齐文本。

显示：内联；

这似乎可以解决父项崩溃的问题，但是增加了空格。

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;。我已经在网络上阅读了许多有关此的文章和博客，但是没有一篇文章给我明确的答案，说明我在布局网站时应使用的内容。

在您询问的选项中：

• float:left;
  我不喜欢浮动元素，因为需要附加标记来清除浮动元素。就我而言，整个float概念在CSS规范中设计欠佳。不过，我们现在对此无能为力。但是重要的是它确实可以工作，并且可以在所有浏览器（甚至是IE6 / 7）中工作，因此，请根据需要使用它。

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

• display:inline;
  除了IE6 / 7以外，不应将其用于布局，在IE6 / 7中，这display:inline; zoom:1是对的不完整支持的后备hack inline-block。

• display:inline-block;
  这是我最喜欢的选项。它在所有浏览器上均能很好且始终如一地运行，并警告IE6 / 7，它支持某些元素。但是请参阅上面的针对此问题的解决方案。

另一个需要注意的inline-block是，由于内联方面，元素之间的空白与文本单词之间的空白被视为相同，因此您可以在元素之间出现空白。有一些解决方法，但是都不是理想的选择。（最好只是在元素之间不留任何空格）

• display:table-cell;
  另一个浏览器兼容性问题。较旧的IE根本无法使用。但是，即使对于其他浏览器，也值得注意的是，该table-cell设计用于在样式为tableand table-row;的元素内部的上下文中使用。table-cell隔离使用并不是实现此目的的预期方式，因此您可能会遇到不同的浏览器将其区别对待的情况。

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

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

• 还有CSS FlexBox功能，该功能旨在让您在框与框之间流动文本。这是一项令人兴奋的功能，它允许一些复杂的布局，但这仍处于开发阶段-参见http://html5please.com/#flexbox

希望能有所帮助。

我通常使用float: left;和添加overflow: auto;来解决折叠的父级问题（关于它为什么起作用的原因，overflow: auto如果您不给它明确的高度，它将展开父级而不是添加滚动条overflow: hidden也可以）。我最需要的垂直对齐方式是菜单栏中的一行文本，可以使用line-heightproperty 来解决。如果确实需要垂直对齐块元素，则可以在父对象和垂直对齐的项目上设置显式高度，绝对位置，最高50％和负边距。

我不使用的原因display: table-cell是，当您有更多的项目超出站点的宽度可以处理时，它会溢出。table-cell将迫使用户水平滚动，而float将包裹溢出菜单，使其无需水平滚动即可使用。

关于float：左溢出：auto的最好之处在于，它可以一直回溯到IE6，而且不会被黑客入侵，甚至可能更进一步。

我会说这取决于您需要什么：

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

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

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

最后，最好的方法是使用flexbox。规范已经更改了几次，所以它还不稳定。但是，一旦完成，这将是我认为的最佳方法。

我更喜欢内联块，尽管float也很有用。旧的IE无法正确显示表格单元（内联块也不正确，但是zoom: 1; *display: inline我经常使用这种技巧）。如果您的孩子的身高小于父母的身高，则漂浮物会将他们带到顶部，而内嵌式挡块有时会弄糟。

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

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

可以使用的一种消除空白的技术是font-size将父级设置为0，然后将其font-size返还给子级，尽管这很麻烦而且很麻烦。

仅作记录用途，以补充Spudley的答案，position: absolute如果您知道列宽，也可以使用和边距。

对我而言，选择一种方法的主要问题是是否需要用列填充整个高度（相等的高度），而表格单元格是最简单的方法（如果您不太关心较旧的浏览器）。

我更喜欢inline-block，但是float仍然是组合HTML元素的有用方法，特别是当我们有一个元素应该向左粘贴而另一个元素向右粘贴时，则浮动效果更好，编写更少的行，而内联块则在许多其他情况下效果很好。