html - CSS - 为什么我的跨度需要浮动来显示具有固定 w & h 的图像？

Question

看我有这个代码：
CSS：

<style>
span#logo {
    height: 80px;
    width: 222px;
    background: url(img/logo.png);
    /* If I take out this it would give my span 0x0px size */
    float: left;
}
</style>

HTML：

<span id="logo"></span>

为什么会发生？为什么我需要有浮子才能让它有形状？

Answer 1

你不需要浮动，你需要任何东西来使你的spannot inline。您可以（并且可能应该）将 更改display为block或inline-block。

Answer 2

SPAN 元素本身是无量纲的。它和你放进去的东西一样大。要使其具有尺寸感知能力，您需要将其display属性更改为blockor inline-block。它的默认显示是inline，它为您提供您所体验的行为。

span#logo {
    height: 80px;
    width: 222px;
    background: url(img/logo.png);
    display: block;
    // or: display: inline-block; zoom: 1; *display: inline;
}

Answer 3

浮动在技术上是块级元素，但它们的行为类似于内联元素，因为它们通常不存在于自己的一行中——你的其余内容将尝试围绕浮动元素流动。

为了更好地理解阅读此