沒有浮動屬性的圖片'消失'

Question

我試圖找出css，一次一步。請看下面的代碼：

<header id="main"> 
    <a href="#" id="title"></a> 
</header> 

和CSS：

#main{ 
    height: 220px; 
    width: auto; 
    border: 2px #000000 solid; 
} 

#title{ 
    float: left; 
    background: url(http://i.imgur.com/m9fvwoJ.jpg) no-repeat; 
    width: 300px; 
    height: 175px; 
} 

如果我刪除浮動特性，畫面「消失」了，我有困難理解爲什麼。

赫雷什是在的jsfiddle代碼=>http://jsfiddle.net/5nWag/3/

Answer 1

元素時其floated，所以你的寬度和高度規則應用和工作如你所期望自動成爲塊級元素。內聯元素不能有明確的寬度和高度，因爲它們的內容決定了其線框的大小。內聯元素也不能有任何垂直邊界，邊界或填充。背景消失的原因是因爲您的<a>沒有內容，因此沒有尺寸，也因爲您明顯無法給背景圖片一個背景圖片而不修改其顯示值。如果你環繞它<span>並添加內容時，背景圖像將是可見的：

http://jsfiddle.net/5nWag/8/