CSS和div问题

Question

在我的网络应用程序中，我有这个css规则：

/*Header*/
#headerAbs{
    background-color: #63554c;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
} 

和这个HTML代码：

<div id="headerAbs">
     <img class="header1" src="../../../../imagenes/header.jpg" alt="ARVC-UMH" />
     <img class="header2" src="../../../../imagenes/logoUsal.png" alt="ARVC-UMH" />
</div>

我的问题是<img>元素设计得很好（如果我更改浮动，它们会移动），但<div>背景不会改变。

我正在使用firebug，如果我检查元素，<div id="headerAbs">没有突出显示，这意味着由于某种原因没有考虑到。与我的应用程序中的另一个元素相同的问题。

我错过了什么吗？

提前致谢。

Answer 1

div中的所有元素都会浮动，因此div的空白高度为空。你仍然可以：

• 为height;
的CSS div属性设置显式值
• 在浮动元素后的clear: both;内添加div块;
• 通过将overflow: hidden添加到其父级（#headerAbs { overflow: hidden; }）来刷新浮动元素（所谓的浮动上下文）。

Answer 2

试试这个：

/*Header*/
#headerAbs{
    background-color: #63554c;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
}



<div id="headerAbs">
   <img class="header1" src="../../../../imagenes/header.jpg" alt="ARVC-UMH" />
   <img class="header2" src="../../../../imagenes/logoUsal.png" alt="ARVC-UMH" />
   <div style="clear:both;" />
</div>

以前div没有高度，而两张图像都在其中，因为它们是使用float定位的。这是一个奇怪的CSS怪癖，但经过一些练习后你会习惯它。您可以自己查看差异，如果不是设置背景颜色，请尝试设置边框。你会注意到，在你添加div以清除它们之前，边框看起来就像一条线，因为div没有高度。

这是我第一次了解这个奇怪问题的链接： http://www.quirksmode.org/css/clearing.html

修改

我决定只拍摄快速屏幕截图，并向所有可能通过谷歌访问此页面的人展示自己。我修改了页面的源代码，如下所示，得到了这个输出：

/*Header*/
#headerAbs{
/*    background-color: #63554c; */
    border: solid 5px red;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
}

<div id="headerAbs">
   <img class="header1" src="../../../../imagenes/header.jpg" alt="ARVC-UMH" />
   <img class="header2" src="../../../../imagenes/logoUsal.png" alt="ARVC-UMH" />
</div>

然后，在实施上面建议的修复后，这是新结果：

/*Header*/
#headerAbs{
/*    background-color: #63554c; */
    border: solid 5px red;
}

#headerAbs .header1{
    float: left;
}

#headerAbs .header2{
    float: right;
}

<div id="headerAbs">
   <img class="header1" src="../../../../imagenes/header.jpg" alt="ARVC-UMH" />
   <img class="header2" src="../../../../imagenes/logoUsal.png" alt="ARVC-UMH" />
   <div style="clear:both;" />
</div>

希望有所帮助！

Answer 3

我通常会将overflow：hidden添加到父元素中。在你的情况下，它将是：

#headerAbs {
    overflow: hidden;
    background-color: #63554c;
}