Html CSS背景色不显示

我的网页有一个页脚和4个独立的页脚列。它们在左右两侧用5px的边距隔开。它们也有绿色的背景。页脚（包含元素）有红色背景，但不显示。我验证了HTML，没有发现XHTML标记的问题，所以我假设这是CSS的问题

小提琴：

页脚CSS声明

/* footer and descendants */
#footer {
  font-size:1.3em;
  margin-top:10px;
  clear:both;
  background-color:red;
  }

/* footer col styling/positioning */
.footerCol {
  background-color:green;
  width:180px;
  float:left;
  margin:10px 5px 10px 5px;
  }

---

将

overflow:auto

添加到您的

#页脚

CSS:

#footer {
    font-size:1.3em;
    margin-top:10px;
    clear:both;
    background-color:red;
    overflow:auto;
}

---

这将恢复您寻找的行为，这是由浮动的子项

.footerCol

div引起的。浮动这些子div会将它们从正常流中移除，因此父div的行为就好像没有任何内容可包含一样。

将

溢出：自动
添加到
页脚
CSS:

#footer {
    font-size:1.3em;
    margin-top:10px;
    clear:both;
    background-color:red;
    overflow:auto;
}


这将恢复您寻找的行为，这是由浮动的子项
.footerCol
div引起的。浮动这些子div会将它们从正常流中移除，因此父div的行为就好像没有任何内容可包含一样。
添加溢出：自动；到#页脚

当您在块元素中浮动项目时，通常希望使用overflow:auto或其他方法，除非您指定高度和宽度（通常不希望这样做），否则封闭元素会变得异常，不会显示

添加溢出：自动；到#页脚

当您在块元素中浮动项目时，通常希望使用overflow:auto或其他方法，除非您指定高度和宽度（通常不希望这样做），否则封闭元素会变得异常，不会显示

实际上，应该为页脚设置一个高度，请参见

实际上，应该为页脚设置一个高度，请参见

JSFiddle：


删除浮动块，只需将元素显示为内联块

  .footerCol {
  background-color:green;
  width:180px;
  display: inline-block;
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

JSFiddle：


删除浮动块，只需将元素显示为内联块

  .footerCol {
  background-color:green;
  width:180px;
  display: inline-block;
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

包含浮点数的问题可通过两种方法解决：

在浮动之后添加带有
clear
的内容（最常见的解决方案是带有clearing的
clearfix
）
使容器创建新的。最常用的方法是设置容器
溢出：隐藏/自动
，
显示：表格
，
显示：内联块
（+宽度，如有必要），或浮动容器本身
所有的方法都有其优点和局限性，所以选择更适合您的情况的方法

要解决此问题，需要添加
min height:contain floats
值，但浏览器尚不支持该值。
包含floats的问题可以通过两种方法解决：

在浮动之后添加带有
clear
的内容（最常见的解决方案是带有clearing的
clearfix
）
使容器创建新的。最常用的方法是设置容器
溢出：隐藏/自动
，
显示：表格
，
显示：内联块
（+宽度，如有必要），或浮动容器本身
所有的方法都有其优点和局限性，所以选择更适合您的情况的方法

要解决这个问题，需要添加
min height:contain float
值，但浏览器还不支持它。
因为你的
footerCol
是浮动的，所以要使你的
#footer
浮动并发出解算汉克斯，因为你的
footerCol
是浮动的，所以要使你的
#footer
浮动并发出解算汉克斯，介意给我一个小小的解释吗？。据我所知，溢出处理大于包含元素的元素。请参阅。这与浮动创建的块格式上下文有关。谢谢，介意给我一个小解释吗？。据我所知，溢出处理大于包含元素的元素。请参阅。它与浮动创建的块格式上下文有关。