我的问题(s)
这些方法是专业网页设计师的首选吗?
在绘制网站时，这些方法中有任何一种是浏览器首选的吗?
这只是个人喜好吗?
我还遗漏了其他技巧吗?
注意:以上问题是关于设计多栏布局的
浮:左;
http://jsfiddle.net/CDe6a/
这是我在创建列布局时经常使用的方法，它似乎工作得很好。但是父节点本身会崩溃，所以你只需要记住清除:both;之后。我刚刚发现的另一个缺点是无法垂直对齐文本。
显示:内联;
这似乎纠正了父节点折叠的问题，但增加了空白。
http://jsfiddle.net/CDe6a/1/
从html中删除空白似乎是解决这个问题的最简单的方法，但如果你真的对你的html很挑剔，这是不可取的。
http://jsfiddle.net/CDe6a/2/
显示:inline-block;
看起来就像display:inline;。
http://jsfiddle.net/CDe6a/3/
显示:表格单元;
http://jsfiddle.net/CDe6a/4/
完美的工作。
我的想法:
我确定我遗漏了很多东西，比如某些会破坏布局的异常，但是，display:table-cell;似乎工作得最好，我想我会开始替换float:left;因为我似乎总是搞砸清楚:两者;。我在网上读过很多关于这方面的文章和博客，但没有一篇给我一个明确的答案，告诉我在布局我的网站时应该使用什么。
我认为这取决于你需要它做什么:
If you need it just to get 3 columns layout, I'd suggest to do it with float.
If you need it for menu, you can use inline-block. For the whitespace problem, you can use few tricks as described by Chris Coyier here http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
If you need to make a multiple choice option, which the width needs to spread evenly inside a specified box, then I'd prefer display: table. This will not work correctly in some browsers, so it depends on your browser support.
最后，最好的方法是使用flexbox。这个规范已经改变了几次，所以它还不稳定。但一旦最终确定，这将是我认为最好的方法。
I usually use float: left; and add overflow: auto; to solve the collapsing parent problem (as to why this works, overflow: auto will expand the parent instead of adding scrollbars if you do not give it explicit height, overflow: hidden works as well). Most of the vertical alignment needs I had are for one-line of text in menu bars, which can be solved using line-height property. If I really need to vertical align a block element, I'd set an explicit height on the parent and the vertically aligned item, position absolute, top 50%, and negative margin.
我不使用display: table-cell的原因是，当你的条目超过了站点的宽度时，它会溢出。Table-cell将强制用户水平滚动，而float将包装溢出菜单，使其在不需要水平滚动的情况下仍然可用。
关于float: left和overflow: auto最好的一点是，它可以一直工作到IE6，而不需要任何修改，甚至可能更久。
我认为这取决于你需要它做什么:
If you need it just to get 3 columns layout, I'd suggest to do it with float.
If you need it for menu, you can use inline-block. For the whitespace problem, you can use few tricks as described by Chris Coyier here http://css-tricks.com/fighting-the-space-between-inline-block-elements/.
If you need to make a multiple choice option, which the width needs to spread evenly inside a specified box, then I'd prefer display: table. This will not work correctly in some browsers, so it depends on your browser support.
最后，最好的方法是使用flexbox。这个规范已经改变了几次，所以它还不稳定。但一旦最终确定，这将是我认为最好的方法。
