Question

我的网页有一个页脚，有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;
  }

Answer 1

将overflow:auto添加到您的#footer CSS：

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

<强> jsFiddle example

这将恢复您寻找的行为，这是由子.footerCol div浮动引起的。浮动这些子div会将它们从正常流中移除，因此父项的行为就像没有任何内容可以包含它一样。

Answer 2

添加溢出：auto;到#footer。

当您在块元素中浮动项目时，您经常要使用overflow：auto，否则封闭元素会变得很糟糕并且不会显示，除非您指定高度和宽度（您通常不会这样做）想做）

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

Answer 3

事实上，您应该为页脚设置一个高度，请参阅jsFiddle

height:240px;

Answer 4

的jsfiddle：

http://jsfiddle.net/48dk6/6/

删除浮动并简单地将元素显示为内联块

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

Answer 5

包含浮动问题可以通过两种方法解决：

在浮点数之后添加clear的内容（最常见的解决方案为clearfix并且已清除pseudo element）。
使容器创建新的Block Formatting context。最常用的方法是设置容器overflow:hidden/auto，display:table，display:inline-block（+宽度，如果需要），或浮动容器本身。

所有方法都有其优点和局限性，因此请选择适合您情况的方法。

要a proposal添加min-height:contain-floats值才能解决此问题，但浏览器尚不支持。

CSS背景颜色没有出现

5 个答案: