CSS不显示div标签的背景颜色

Question

我把我的div id="banner"和样式设置为给出与图像匹配但颜色不显示的颜色。那么，我该怎么办？

＆＃13;

＆＃13;

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
}

＆＃13;

<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->
    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于#cloud（#banner的孩子）被浮动，#banner基本上会崩溃，而且它的行为就像没有内容一样。您可以通过将overflow:auto添加到#banner来解决此问题。

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
  overflow: auto;
}

<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->

    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

Answer 2

简单地给#banner一些高度。请参阅代码段。

#banner {
  background-color: #78c8f0;
  height: 40px;
}

<强>段

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
}
#banner {
  background-color: #78c8f0;
  height: 40px;
}

<div id="page">
  <div id="banner">
    <div id="cloud">
      <img src="Cloud4.gif" />
    </div>
    <!--cloud-->

    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->
</div>
<!--page-->

Answer 3

请参阅此fiddle

未显示背景颜色，因为含有该成分的元素漂浮，因此其他元素甚至不存在。因此，

更改#banner的css，如下所示

#banner {
    float: left;
  background-color: #78c8f0;
}

OR

更改#cloud的css，如下所示

#cloud {
  /* float: left; */
  padding: 0px;
  margin: 0px;
}