CSS背景顏色未出現

Question

我的網頁有一個頁腳，其中包含4個單獨的頁腳列。 它們在左右兩側以5px的邊距分隔。 它們也具有綠色背景。 頁腳（包含元素）具有紅色背景，但未顯示。 我驗證了HTML，但找不到XHTML標記問題，因此我假設這是CSS的問題。

小提琴： http : //jsfiddle.net/48dk6/

頁腳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示例

這將恢復您尋求的行為，這是由兒童.footerCol div浮動引起的。 浮動這些子div會將其從常規流中刪除，因此父div的行為似乎沒有任何內容可容納。

Answer 2

添加溢出：自動； 到#footer。

當您將項目浮動在block元素內時，您經常要使用以下溢出：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

包含浮點數的問題可以通過兩種方法解決：

1. 在浮點數之后添加帶有clear東西（最常見的解決方案是clearfix 偽元素的 clearfix ）。
2. 使容器創建新的塊格式設置上下文 。 最受歡迎的方法是設置容器overflow:hidden/auto ， display:table ， display:inline-block （+寬度，如果需要）或浮動容器本身。

所有方法都有其優點和局限性，因此請選擇最適合您的情況的方法。

有建議添加min-height:contain-floats值來解決此問題，但瀏覽器尚不支持。