带有显示表而不是显示块的Clearfix会产生不同的结果。为什么？

Question

以下HTML：

<div id="wrapper">
  <div class="left">F1</div>
  <div class="spacer">Here is a div that is not floated</div>
</div>

和CSS：

.left { float: left; width: 100px; height: 50px; border: 1px solid green }

#wrapper { background: yellow }

#wrapper::after {
  content: "";
  display: block;
  clear: both;
}

.spacer { margin-bottom: 34px }

产生这个：

（参见：JSFiddle）

从生成的输出中可以看出，包装器背景（黄色）仅与div.spacer一样高。为什么#wrapper div完全不包含浮动元素？

在#wrapper::after规则中，如果我从display: block更改为display: table，则按预期工作，如下所示： 为什么呢？

修改 另外，如果我将margin-bottom更改为32px而不是34px，我会得到预期的结果！