html - float-property なしで画像が「消える」

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;
}

浮動小数点プロパティを削除すると、画像が「消え」、その理由を理解するのが困難です。

Heres は JsFiddle のコードです => http://jsfiddle.net/5nWag/3/