display: block; VS display: table;

Question

我无法区分 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; 有什么区别？

- nalzok

---

请阅读此文章：http://blog.karenmenezes.com/2014/apr/13/floats-inline-block-or-display-table-or-flexbox/ - Sanjeev Kumar

在您的示例中，您看不到任何区别。在微型clearfix hack中使用display：table是为了使::before伪元素受益于防止子元素的顶部边距与容器元素折叠。 - Alohci

Answer 1

如下示例所示，display: table; 应用于 .clearfix::after，可防止最后一个子元素的底部边距与 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>

- nalzok

Answer 2

如果您不使用清除浮动的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 之间的区别...

- Mr Lister

---

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