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占据全高，并且背景颜色会显示出来。 我清除浮点数的首选方法是使包含的元素overflow: hidden ：

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

有关清除浮点的更多信息，请查看有关它的Quirksmode.org文章，其中包括对overflow: hidden的解释overflow: hidden方法。

Answer 2

您可以将background-color应用于<span> ，将高度设置为<div class="days"> ，也可以将<div>置于CSS的<span>下方clear:both; 。

Answer 3

我假设您无法更改div的背景颜色。 您可以在http://jsfiddle.net/FazXG/2/上看到固定版本