如何使用float css属性呈现span标签，但其中没有任何内容？

Question

我有一个非常简单的HTML和CSS结构，可用于练习。

请检查附带的小提琴链接。

我正在处理一个span标签，并给了它一些高度和宽度，但是没有渲染。

我知道原因。 span是一个内联标签，它不考虑height和width属性。

但是突然之间，我给了它一个float属性，并将其呈现在页面上。

我的问题是float属性如何影响内联元素，即使该元素内部没有任何内容。

body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.5em;
}

div.wrapper {
  background: pink;
  width: 200px;
  height: 200px;
}

span.round{
  width:60px;
  height:60px;
  background: orange;
  float:right; /** not using float, vanishes the whole span **/
}

<div class="wrapper">
  <span class="round"></span>
</div>

Answer 1

从Mozilla开发人员部分复制： “由于float表示使用块布局，因此修改了显示值的计算值”。 结果，该标签将自动为块类型。