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方法的说明.