html - 如何使用 float css 属性呈现一个没有任何内容的 span 标签？

Question

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

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

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

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

但突然间我给了它一个浮动属性，它呈现在页面上。

我的问题是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>

标签： htmlcss

Answer 1

复制自 Mozilla 开发者部分：“由于浮动意味着使用块布局，它会修改显示值的计算值”。结果，标签将自动成为块类型。