CSS CSS中使用span和div遇到的問題

1.span是行級元素，div是塊級元素

2.span占用的寬度是內容的寬度，而div預設是一行。

所以一般在頁面中，只有一行或不到一行文字用span，元素佔據多行時用div。

下圖是希望得到的效果

div在兩個span的下方，但是如果這麼寫，

div和span的位置重疊，因為對span元素設定了float屬性，從而導致浮動塌陷，解決辦法是將span元素的高度計算進去，但是因為span元素是行級元素，無法設定高度，所以需要其他解決辦法。

這樣就可以了。

將div設定為display: inline-block，使其既具有block元素的特性，可以設定寬度和高度，同時也具有inline元素的不換行的特性。

但是這是對第二個span元素設定的float: right屬性不生效，因為display: inline-block會使元素按行依次排列，所以第二個span元素的float: right不生效，要想達到想要的效果，可以通過設定margin-left來實現。

將div設定為overflow: hidden，使其形成bfc，可以使div高度自動計算，從而和下面的div不會發生重疊。

將content設定為position: absolute，所以content會去找第乙個position屬性不為static的父元素，即html，於是就會相對於html向下移動30px。

這種方法雖然也可以解決問題，但是也會帶來新的問題，因為position: absolute會導致content元素脫離文件流，如果在content元素下面還有其他元素，那麼其他元素位置可能會和content元素重疊。

例如，

所以又發生了同樣的問題，這種方法不推薦。

對於span和div都用時，同時span元素設定float屬性時，還是對span外加div使其變成塊級元素並設定高度，才不會使其後面的元素受到影響。