CSS，使用display：table with before伪元素

Question

我一直在寻找清除花车的最佳方法并找到perfect solution，如果你看一下答案，解决方案使用的是display:table而不是display:block，原因是说明：

  

只有在使用时才需要使用table而不是block    :before包含子元素的上边距。

我尝试理解其含义，我做了一些测试，但我无法弄清楚使用display:table的原因是什么，如果有人可以提供代码示例来显示差异和需求使用display:table。

修改

这是一个fiddle，我尝试测试差异，我确定有一个，但我无法确定要测试的内容。

编辑以澄清：

我的问题不是关于显示block/table之间的区别，我的问题是关于使用display:table而不是display:block的原因（关于清除花车），布莱恩从this answer提出了一个解释，但我无法理解其中的原因，如果有人能够解释原因，可能会提供一个代码示例来说明差异。

Answer 1

您引用的评论 - 以及扩展名代码 - 来自Nicolas Gallagher提出的微清除修复，如该问题的最佳答案所述。 Nicolas写了article介绍了这种技术（出于某种原因，它没有与另一个答案相关联），并在其中解释了使用display: table的原因，如下所示：

  

此“micro clearfix”生成伪元素并将其display设置为table。这将创建一个匿名表单元格和一个新的块格式化上下文，这意味着:before伪元素可以防止上边距崩溃。 :after伪元素用于清除浮点数。因此，无需隐藏任何生成的内容，并且减少了所需的代码总量。

更详细地说，如果一个元素有第一个孩子并且它们都是display: block，并且孩子有一个上边距，那么会发生的事情是子边距会合并，或collapse，使用父边距（如果有的话），导致上边距明显从子元素中消失，这有时可能是不合需要的。有关此效果的说明，请参阅this question。

由于显而易见的原因，边距不会因表格元素而崩溃，这就是display: table黑客行为的原因。

所以，基本上，display: table - 以及:before伪元素 - 对于clearfix来说并不是必不可少的，只是一个额外的hack来阻止边缘在元素和它的第一个之间折叠儿童。如果您想要做的只是清除内部浮动，这就是一个clearfix要做的事情，那么您就不需要display: table或:before。

Answer 2

display：table和display之间的主要区别：在以下简短摘要中阻止。

display:table告诉元素显示为表格。嵌套元素应该显示为表格行和表格单元格，模仿好的旧TR和TD ..

<强> Live Working Demo

display:block表示元素显示为块，因为段落和标题始终如此。一个块在它上面和下面有一些空格，并且在它旁边不允许任何HTML元素，除非另有命令（例如，通过向另一个元素添加浮动声明）。

<强> Live Working Demo

More details here