为什么内联元素在浮动时会接受宽度和高度？

Question

现在我有一个span元素，我给它宽度和高度，例如500px 我知道它是内联元素所以它不接受宽度和高度，但为什么它适用于我漂浮它？

span.first {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  float: right;
}

span.second {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}

<span class="first">with float</span>
<span class="second">without float</span>

https://codepen.io/kemozzz/pen/KvVrXj

Answer 1

根据CSS规则，当您将float应用于元素时，在大多数情况下，它将成为块元素。内联和内联块的元素将计算为阻止。

来自MDN：

Answer 2

浮动元素时，它会自动变为display: block。

来自规范：

https://www.w3.org/TR/CSS22/visuren.html#dis-pos-flo