浮动：左；VS显示：内联；VS显示：内联块；VS显示：表格单元格；

Question

浮动：左；VS显示：内联；VS显示：内联块；VS显示：表格单元格；

我的问题

1. 这些方法中的任何一种都是专业网页设计师的首选吗？

2. 在绘制网站时，网页浏览器是否更喜欢这些方法？

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;..我在网上读过很多关于这方面的文章和博客，但没有一篇文章和博客给我一个明确的答案，我应该使用什么来布局我的网站。

Answer 1

我通常用float: left;加上overflow: auto;到解决坍塌家长问题(至于为什么这样做，overflow: auto如果不给出显式高度，则将展开父级，而不是添加滚动条，overflow: hidden也起作用)。我对垂直排列的大部分需求都是为了菜单栏中的一行文本，可以用line-height财产。如果我真的需要垂直对齐块元素，我会在父元素和垂直对齐项、位置绝对、顶部50%和负边距上设置一个显式的高度。我不使用的原因display: table-cell是当您有超过网站宽度所能处理的项目时它溢出的方式。表格单元格将迫使用户水平滚动，而浮动将包装溢出菜单，使它仍然可用，不需要水平滚动。关于Float：LefandOverflow：Auto的最佳之处在于，它可以在没有黑客攻击的情况下一直工作到IE6，甚至可能更远。