CSS与div问题

在我的web应用程序中，我有以下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>

我的问题是

元素的样式很好（如果我更改浮点，它们会移动），但是

背景没有改变

我使用的是firebug，如果我检查元素，

不会突出显示，这意味着出于某种原因没有考虑到这一点。我的应用程序中的另一个元素也存在同样的问题

我错过什么了吗

---

提前感谢。

您的

div

中的所有元素都是浮动的，因此您的

div

具有空高度。你仍然可以：

• 为

  div的CSS
  height
  属性设置显式值
  添加
  清除：两者都有div中的code>block
  通过将
  overflow:hidden
  添加到浮动元素的父元素（
  #headerAbs{overflow:hidden；}
  ）来刷新浮动元素（所谓的浮动上下文）
  

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

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

试试这个：

/*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>

/*标题*/
#头饰{
背景色：#63554c；
}
#校长1{
浮动：左；
}
#校长2{
浮动：对；
}

以前，当两个图像位于div中时，div没有高度，因为它们是使用float定位的。这是CSS的一个奇怪的怪癖，但经过一些练习，你会习惯的。如果不设置背景色，而是尝试设置边框，您可以自己看到差异。您会注意到，在添加div以清除两者之前，边框看起来就像一条线，因为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>

/*标题*/
#头饰{
/*背景色：#63554c*/
边框：实心5px红色；
}
#校长1{
浮动：左；
}
#校长2{
浮动：对；
}

然后，在实施了我上面建议的修复之后，下面是新的结果：

/*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>

/*标题*/
#头饰{
/*背景色：#63554c*/
边框：实心5px红色；
}
#校长1{
浮动：左；
}
#校长2{
浮动：对；
}

---

希望有帮助

headerAbs

只会变得足够大以显示图像，如果这些图像的高度相同，那么你将无法通过它们看到

headerAbs

，因此看不到背景色。我得到了整个页面的背景。无论如何，谢谢你的链接！你的编辑很有趣。我相信这对很多人都很有用。谢谢again@BlancaHdez隐马尔可夫模型。。。这似乎有点奇怪。一定还有别的事情发生了。不管怎样，希望你能找到一些信息，至少对你将来有所帮助！