Kolor tła div nie działa z wejściami pływającymi w lewo

Question

Potrzebuję następującego elementu div, aby mieć kolor tła - proste prawo. Ale nie działa poprawnie. Zrobiłem kilka testów i odkryłem pływaki na przęsłach, które je skręcają. Jak to naprawić?

.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

Gdy pływak elementy, wziąć je z normalnego przepływu dokumentów, w wyniku czego, inne elementy spoza płynął nie zrobić miejsce dla nich.

To, co obserwujesz, to to, że twój div nie bierze już pełnej wysokości swoich elementów potomnych, ponieważ są one pływające. Wszystko, co musisz zrobić, to "wyczyścić" lub cofnąć pływające, i zrobić days wziąć pełną wysokość, a jego kolor tła pokaże. Mój preferowany sposób rozliczania pływaków jest dać zawierający elementu overflow: hidden:

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

Aby uzyskać więcej informacji na temat usuwania pływaków, sprawdź Quirksmode.org artykuł na ten temat, która zawiera wyjaśnienie sposobu overflow: hidden.

Answer 2

Można też zastosować background-color do <span> ustawić wysokość do <div class="days">, lub umieścić <div> poniżej <span> z CSS clear:both;.

Answer 3

Zakładam, że nie jesteś w stanie zmienić koloru tła elementu div. Możesz zobaczyć wersję stałą pod http://jsfiddle.net/FazXG/2/