div背景色が左に浮かんでいる入力で動作しません

Question

背景色を持つためには次のdivが必要です - 単純です。しかし、正しく動作しません。私はいくつかのテストをして、それを台無しにしているスパンの浮きを考え出しました。だから、私はこれをどのように修正するのですか？

.days{ 
background-color:#000; 
} 

span { 
display:block; 
width:200px; 
float:left; 
} 

<div class="days"> 
     <span> 
     <input id="Field9" name="Field9" type="checkbox" value="" size="3" maxlength="4" tabindex="4" /> 
     <label class="days" >Monday</label> 
     </span> <span> 
     <input id="Field5" name="Field10" type="checkbox" value="" size="3" maxlength="4" tabindex="4" /> 
     <label class="days" >Tuesday</label> 
     </span> <span> 
     <input id="Field5" name="Field11" type="checkbox" value="" size="3" maxlength="4" tabindex="4" /> 
     <label class="days" >Wednesday</label> 
     </span> <span> 
    <!-- goes till sunday --!> 
</div> 

Answer 1

要素を浮動させると、ドキュメントの通常の流れから取り除かれ、その結果、浮動していない他の要素はそれらのための余裕を持たない。

あなたが見ているのは、あなたのdivがフローティングになっているので、子要素の完全な高さを取らなくなっていることです。浮動小数点数を「クリア」または元に戻すだけで、daysが完全な高さになり、その背景色が表示されます。 、クリアフロートに関する詳細情報については

.days 
{ 
    background-color:#000; 
    overflow: hidden; 
} 

overflow: hidden方法の説明が含まれ、それについてQuirksmode.orgの記事を、チェックアウト：フロートをクリアする私の好適な方法は、あなたが要素overflow: hiddenを含む与えることです。

Answer 2

あなたは、<span>にbackground-colorを適用<div class="days">に高さを設定する、またはCSS clear:both;で<span>以下<div>を置くことができます。

Answer 3

divの背景色を変更できないとします。要素が `display`属性に従わない浮かべ、` `あなたのspan`タグの;ブロック：あなたが`表示を取り除くことができますhttp://jsfiddle.net/FazXG/2/