css - CSS3 Quicklink容器背景

我有以下CSS3代码用于快速链接容器。我不知道为什么，但是渐变背景不在文本下方。
如果我从float: left删除div.quicklinks，我将显示渐变背景，但我想在左边添加一些文字。
谢谢

div.quickLinksContainer {
    clear:both;
    border-top: 1px solid #999999;
    text-align:center;
    margin: auto;
    width: 100%;
    padding: 10px;
    background-image: linear-gradient(bottom, rgb(179,175,176) 49%, rgb(237,237,237) 75%);
}
div.quickLinks {
    font-size: 12px;
    float:left;
}
.quickLinks h2 {
  color:#666666;
  font-size:14px;
  font-weight:bold;
  margin-bottom:10px;
}
.quickLinks li a {
  color:#555555;
  text-decoration:initial;
}

最佳答案

背景不在内容后面的原因是

div.quickLinks {
    float:left;
}

如果您宁愿直接将背景渐变放在div.quickLinks内，它将起作用。

有关演示，请参见this fiddle。

编辑
在评论的背景上：

浮动内容时，父容器（在本例中为quickLinksContainer）不知道内容的大小。因此，要使容器具有正确的大小，您必须指定它。例如这样的：

div.quickLinksContainer {
    height: 150px;
}

请参见updated fiddle