浮动：左; vs display：inline; vs display：inline-block; vs display：table-cell;
我的问题
-
这些方法中的任何一种都是专业网页devise师的首选吗？
-
在绘制网站时，是否有任何这些方法是由networking浏览器提供的？
-
这全是个人喜好吗？
-
还有其他的技术我错过了吗？
注意：以上问题涉及devise多列布局
浮动：左;
http://jsfiddle.net/CDe6a/
这是我创build列布局时总是使用的方法，它似乎工作得很好。 虽然父母自己也崩溃了，所以你只需要记住clear:both; 之后。 我刚刚发现的另一个问题是无法垂直alignment文本。
显示：内联;
这似乎纠正了崩溃的父母的问题，但增加了空白。
http://jsfiddle.net/CDe6a/1/
从html中删除空格似乎是最简单的解决这个问题，但如果你真的挑剔你的HTML是不希望的。
http://jsfiddle.net/CDe6a/2/
显示：内联块;
似乎行为完全像display:inline; 。
http://jsfiddle.net/CDe6a/3/
显示：表细胞;
http://jsfiddle.net/CDe6a/4/
完美的作品。
我的想法：
我确定我错过了一大堆东西，比如某些会破坏布局的exception，但是display:table-cell; 似乎工作最好，我想我会开始取代float:left; 因为我似乎总是弄得clear:both; 。 我已经在网上阅读了很多关于这方面的文章和博客，但是在布置我的网站时，他们没有给我一个明确的答案。
你问到的选项有：
-
float:left;
我不喜欢花车，因为需要有额外的标记清除浮动。 就我而言，整个float概念在CSS规范中devise的很差。 现在没有什么可以做的。 但重要的是它能够工作，并且可以在所有的浏览器（甚至IE6 / 7）中运行，所以如果你喜欢的话可以使用它。
如果您使用:afterselect器清除浮点数，则可能不需要使用附加的清除标记，但是如果要支持IE6或IE7，则这不是一个选项。
-
display:inline;
这不应该用于布局，除了IE6 / 7，其中display:inline; zoom:1display:inline; zoom:1是inline-block的破坏支持的后退破解。 -
display:inline-block;
这是我最喜欢的select。 它在所有的浏览器上运行良好，一致，IE6 / 7的一个警告，它支持一些元素。 但是请参阅上面的hacky解决方法来解决这个问题。
inline-block的另一个重要警告是，由于内联方面，元素之间的空白与文本之间的空白处理相同，因此可以在元素之间出现间隙。 有这方面的解决办法，但没有一个是理想的。 （最好的就是在元素之间不要有空格）
-
display:table-cell;
另一个你会遇到浏览器兼容性问题。 老一点的IE浏览器根本就不能用。 但即使对于其他浏览器，值得注意的是，table-cell被devise用于在作为table和table-row样式的元素内部的上下文中; 单独使用table-cell不是实现它的预期方式，因此您可能会遇到不同的浏览器对其进行不同的处理。
其他技术，你可能错过了？ 是。
-
既然你说这是一个多列布局，那么你可能想知道一个CSS列function 。 但是它不是最好的支持function（即使在IE9中也不支持IE，所有其他浏览器都需要一个厂商前缀），所以你可能不想使用它。 但是这是另一种select，你确实问过。
-
还有CSS FlexBoxfunction，它可以让文本从一个框到另一个框。 这是一个令人兴奋的function，将允许一些复杂的布局，但这仍然是非常发展 – 请参阅http://html5please.com/#flexbox
希望有所帮助。
我通常使用float: left; 并添加overflow: auto; 解决崩溃的父问题 （至于为什么这个工作， overflow: auto将扩大父母，而不是添加滚动条，如果你不给它明确的高度， overflow: hidden工程以及）。 大多数垂直alignment的需求，我已经是在菜单栏中的一行文本 ，可以使用line-height属性来解决。 如果我真的需要垂直alignment一个块元素，我会设置一个明确的高度父母和垂直alignment的项目，位置绝对，顶部50％，负边距。
我不使用display: table-cell是，当你有更多的项目比网站的宽度可以处理溢出的方式。 表格单元格将强制用户水平滚动，而浮动将包装溢出菜单，使其仍然可用，无需水平滚动。
关于float：left和overflow：auto的最好的一点是，它可以一直工作到IE6，而不需要黑客，甚至可能更进一步。
我想说这取决于你需要什么：
-
如果你需要它只是为了得到3列布局，我build议用
float。 -
如果你需要菜单，你可以使用
inline-block。 对于空白的问题，你可以使用Chris Coyier在http://css-tricks.com/fighting-the-space-between-inline-block-elements/中描述的一些技巧。; -
如果你需要做一个多选的选项，宽度需要均匀分布在指定的框内，那么我更喜欢
display: table。 这在某些浏览器中无法正常工作，所以取决于您的浏览器支持。
最后，最好的方法是使用flexbox 。 这个规范已经改变了几次，所以目前还不稳定。 但一旦完成，这将是我认为最好的方法。
我更喜欢内联块，虽然float也是有用的。 表格单元格不能被旧的IE正确渲染（内嵌块也没有，但是有zoom: 1; *display: inline hack，我经常使用）。 如果你的孩子身高比他们的父母矮，那么浮游物会把他们带到上面，而内嵌块会有时会扭曲。
大多数时候，浏览器会正确地解释所有的东西，当然，除非是IE浏览器。 你总是要检查一下，以确保IE浏览器不会吮吸 – 例如，表格单元的概念。
在所有的现实中，是的，这归结于个人偏好。
一种可以用来摆脱空白的技术是将font-size设置为0，然后将font-size返回给孩子，虽然这是一个麻烦，总之。
为了logging，为了增加Spudley的答案，如果知道列宽，还可以使用position: absolute和margin。
对于我来说，当你使用方法时，主要的问题是你是否需要列填充整个高度（等高），table-cell是最简单的方法（如果你不太喜欢旧的浏览器）。
我更喜欢inline-block ，但是float仍然是把HTML元素放在一起的有用方法，特别是当我们有一个元素应该保持左边和右边的一个元素时，写入更less的行可以更好地工作，而内联块在许多其他情况下。
