css - float プロパティのテキストでも背景で位置が変わらないのはなぜですか?

Question

私はこのコードを持っています

<div id="one" class="test">first div</div>
<div id="two" class="test">second div div</div>
<div id="three" class="test">third  div</div>

1 番目と 2 番目の div を左にフロートさせますが、3 番目の div はフロートさせません。3 番目の div の背景は上向きになります。しかし、テキストがdiv内にあるため、3番目のdivのテキストも表示されない理由を知りたいです。

フィドルリンクはこちらhttp://jsfiddle.net/babu333/3KPxE/3/