html - 为什么内联元素在 float 时接受宽度和高度？

Question

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

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 应用于一个元素时，在大多数情况下它会变成一个 block 元素。内联和内联 block 元素将计算为 block 。

来自 MDN: