Html 浮动：左；vs显示：内联；vs显示：内联块；vs显示：表格单元格； 我的问题

这些方法中有哪一种是专业网页设计师的首选方法

在绘制网站时，网络浏览器是否会首选这些方法中的任何一种

这只是个人喜好吗

我还缺少其他技巧吗

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

---

浮动：左；

这是我在创建列布局时经常使用的方法，它似乎工作得很好。不过，父级本身确实会崩溃，所以您只需要记住清除：两者都是之后。我刚刚发现的另一个缺点是无法垂直对齐文本

显示：内联； 这似乎纠正了父级崩溃的问题，但增加了空格

从html中删除空白似乎是解决此问题的最简单方法，但如果您对html非常挑剔，则不需要这样做

显示：内联块； 看起来就像

display:inline



显示：表格单元格；


工作完美

我的想法：
我肯定我遗漏了很多东西，比如某些会破坏布局的异常，但是，
display:table cell似乎工作得最好，我想我将开始替换
float:left就像我总是把
弄得一团糟一样清楚：两者都是。我在网上读过很多关于这方面的文章和博客，但没有一篇能给我一个明确的答案，告诉我在设计网站时应该使用什么。
我更喜欢内联块，尽管float也很有用。旧IEs不能正确呈现表格单元格（内联块也不能，但我经常使用
zoom:1；*display:inline
hack）。如果子对象的高度小于其父对象的高度，则浮动会将其带到顶部，而内联块有时会出错

大多数情况下，浏览器都能正确解释所有内容，当然，除非是IE。你必须经常检查以确保IE不糟糕——例如，表格单元格概念

事实上，是的，这归结为个人偏好

消除空白的一种方法是将
字体大小设置为0给家长，然后将
字体大小返回给孩子，尽管这很麻烦，而且很糟糕。
我认为这取决于你需要它做什么：

如果您需要它只是为了获得3列布局，我建议使用
float

如果菜单需要它，可以使用
内联块
。对于空白问题，您可以使用Chris Coyier在这里描述的一些技巧

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

最后，最好的方法是使用
flexbox
。这方面的规范已经更改了几次，所以目前还不稳定。但一旦最终确定，这将是我认为最好的方法。
我通常使用
float:left和添加
溢出：自动
to（至于为什么这样做，
overflow:auto
将扩展父级，而不是添加滚动条，如果您不给它明确的高度，
overflow:hidden
也可以）。我遇到的大多数垂直对齐需求都是for，可以使用
line height
属性来解决。如果我真的需要垂直对齐块元素，我会在父元素和垂直对齐的项目上设置一个明确的高度，绝对位置、顶部50%和负边距

我不使用
display:table cell
的原因是，当站点宽度无法处理的项目较多时，它会溢出。表格单元格将强制用户水平滚动，而浮动将包装溢出菜单，使其仍然可用，而无需水平滚动

float:left和overflow:auto最棒的地方在于，它可以在没有黑客攻击的情况下一直工作到IE6，甚至可能更久

您询问的选项：


float：左

我不喜欢浮动，因为需要额外的标记来清除浮动。就我而言，整个
float
概念在CSS规范中设计得很糟糕。但我们现在对此无能为力。但重要的是它确实可以工作，并且在所有浏览器（甚至IE6/7）中都可以工作，所以如果您喜欢，可以使用它


如果使用
：after
选择器清除浮动，则可能不需要额外的清除标记，但如果您希望支持IE6或IE7，则这不是一个选项


显示：内联

这不应用于布局，IE6/7除外，其中
display:inline；zoom:1
是对
内联块
的中断支持的一种回退攻击

显示：内联块

这是我最喜欢的选择。它在所有浏览器中都运行良好且一致，但IE6/7对某些元素提供了支持。但请参见上文，了解解决此问题的黑客解决方案


inline block
的另一个大警告是，由于内联方面的原因，元素之间的空白被视为与文本单词之间的空白相同，因此可以在元素之间出现间隙。这方面有很多解决办法，但没有一个是理想的。（最好是元素之间不要有任何空格）


显示：表格单元格

另一个问题是浏览器兼容性问题。老一辈的老一辈人根本不适合这个。但即使对于其他浏览器，它也很有用