向左飘浮; vs display：inline; vs display：inline
我的问题
这些方法中的任何一种都是专业网页设计师的首选吗？
在绘制网站时，是否有任何这些方法可以通过网络浏览器进行提示？
这全是个人喜好吗？
我还有其他技术吗？
注：以上问题涉及设计多列布局
向左飘浮;
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，其中display:inline; zoom:1 display:inline; zoom:1是inline-block的破坏支持的后退破解。
display:inline-block;
这是我最喜欢的选择。 它在所有浏览器中都能很好地运行，并且对IE6 / 7有个警告，IE6 / 7支持某些元素。 但请参阅上面的解决方法来解决这个问题。
inline-block的另一个重要警告是，由于内联方面，元素之间的空白处理方式与文本字之间的空白处理方式相同，因此可以在元素之间出现间隙。 这有一些解决方法，但它们都不是理想的。 （最好的就是在元素之间不要有空格）
display:table-cell; 另一个你会遇到浏览器兼容性问题的地方。 较早的IE浏览器根本无法使用。 但即使对于其他浏览器，值得注意的是
table-cell被设计用于位于table和table-row元素内部的上下文中; 单独使用table-cell并不是实现它的预期方式，因此您可能会遇到不同的浏览器以不同的方式处理它。 其他技术你可能错过了？ 是。
既然你说这是用于多列布局，那么你可能想知道一个CSS列功能。 但它不是最好的支持功能（即使在IE9中也不支持IE，并且所有其他浏览器都需要供应商前缀），因此您可能不想使用它。 但这是另一种选择，你确实问过。
还有CSS FlexBox功能，旨在让您将文本从框中移动到框中。 这是一个令人兴奋的功能，可以实现一些复杂的布局，但这仍然是非常重要的 - 参见http://html5please.com/#flexbox
希望有所帮助。
我通常使用float: left; 并添加overflow: auto; 为了解决崩溃的父问题（至于为什么这会起作用， overflow: auto会展开父窗口而不是添加滚动条，如果你没有给它明确的高度， overflow: hidden也可以）。 大部分的垂直对齐需求都是针对菜单栏中的一行文本，可以使用line-height属性来解决。 如果我真的需要垂直对齐一个块元素，我会在父级和垂直对齐的项目上设置一个明确的高度，绝对位置，顶部50％和负边距。
我不使用display: table-cell是，当你有更多的项目比网站的宽度可以处理溢出。 表格单元格将强制用户水平滚动，而浮动元素将包裹溢出菜单，使其仍然可用，无需水平滚动。
关于float：left和overflow：auto的最好的事情是，它可以在没有黑客的情况下一直回到IE6，甚至可能更进一步。
我会说这取决于你需要什么：
如果你需要它只是为了获得3列布局，我会建议用float来做。
如果你需要菜单，你可以使用inline-block 。 对于空白问题，您可以使用Chris Coyier在http://css-tricks.com/fighting-the-space-between-inline-block-elements/中介绍的一些技巧。
如果你需要做一个多选选项，宽度需要均匀分布在指定的框中，那么我更喜欢display: table 。 这在某些浏览器中无法正常工作，因此取决于您的浏览器支持。
最后，最好的方法是使用flexbox 。 这个规范已经改变了几次，所以它尚不稳定。 但一旦完成，这将是我认为最好的方法。