显示：块； VS显示：表格；答案

【问题标题】：display: block; VS display: table;显示：块； VS显示：表格；
【发布时间】：2017-02-15 23:45:58
【问题描述】：

我看不出display: block; 和display: table; 之间的区别。例如，在编写 clearfix 时，以下两个 CSS 规则的行为似乎相同：

使用display: block;

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

<div class="clearfix">
  <div style="float: right">Sidebar</div>
</div>
<p>
  Content
</p>

使用display: table;

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix">
  <div style="float: right">Sidebar</div>
</div>
<p>
  Content
</p>

所以我的问题是：display: block; 和 display: table; 之间有什么区别？

【问题讨论】：

浏览这篇文章：blog.karenmenezes.com/2014/apr/13/…
你不会看到你的例子有什么不同。在 micro clearfix hack 中使用 display:table 是为了 ::before 伪元素的好处，用于停止顶部边距子元素与容器元素折叠。

标签： html css layout css-float clearfix

【解决方案1】：

如果你不使用 clearfix hack，区别会更明显！

<p>With display:table you get</p>

<div style="display:table; border:1px solid">
  This is a table
</div>

<p>And with display:block you get</p>

<div style="display:block; border:1px solid">
  This is a block
</div>

不过，为了一点食物，你可以问display:table 和display:inline-block 之间有什么区别...

【讨论】：

我怀疑提问者完全问错了问题，他们实际上并不是要问 display: table 和 display: block 或 inline-block 之间有什么区别。

【解决方案2】：

从下面的演示中可以看出，.clearfix::after 上应用的display: table; 可以防止clearfix 的最后一个子元素的下边距与clearfix 本身的下边距折叠，而display: table; 仍然允许崩溃。

.clearfix_table,
.clearfix_block {
  background-color: silver;
}
.clearfix_table::after,
.clearfix_block::after {
  content: "";
  clear: both;
}
.clearfix_table::after {
  display: table;
}
.clearfix_block::after {
  display: block;
}

<div class="clearfix_table">
  <p>text</p>
</div>

<hr>

<div class="clearfix_block">
  <p>text</p>
</div>

【讨论】：