The use of
tablerather thanblockis only necessary if using
:beforeto contain the top-margins of child elements.
我尝试理解其含义,我做了一些测试,但我无法弄清楚使用display：table的原因是什么,如果有人可以提供代码示例来显示差异并且需要使用display：table.
编辑：
这是一个fiddle,我试着测试差异,我确定有一个,但我无法弄清楚要测试什么.
编辑说明：
我的问题不在于显示块/表之间的区别,我的问题是关于使用display：table而不是display：block(关于清除浮动)的原因,有一个由Bryan从this answer带来的解释,但我无法理解原因,如果有人能解释是什么原因,也许可以提供一个代码示例来说明差异.
解决方法
This “micro clearfix” generates pseudo-elements and sets their
displaytotable. This creates an anonymous table-cell and a new block formatting context that means the:beforepseudo-element prevents top-margin collapse. The:afterpseudo-element is used to clear the floats. As a result,there is no need to hide any generated content and the total amount of code needed is reduced.
更详细地说,如果一个元素有第一个子节点并且它们都是display：block,并且子节点有一个上边距,那么会发生的情况是子边距将与父边距(如果有的话)合并,或者是collapse,导致上边缘明显从子元素中消失,这有时可能是不合需要的.有关此效果的说明,请参阅this question.
由于显而易见的原因,边距不会通过表元素崩溃,这就是display：table hack工作的原因.
因此,基本上,display：table – 以及扩展名：before伪元素 – 对于clearfix来说并不是必不可少的,只是一个额外的hack来阻止元素与其第一个子元素之间的折叠.如果您要做的只是清除内部浮动,这是一个clearfix的意图,那么您不需要display：table或：before.
