html - 页脚CSS无效

我为CSS页面设置了一些HTML样式，所有样式均按预期工作。然后，我（至少）编辑了CSS，突然布局中断了。我有原始的（有效的）CSS的副本，所以我可以这样做。但是我想弄清楚我做错了什么。

因此，我花了几个小时来研究错误的CSS，但我只是找不到错误的地方。希望有人可以指出错误。

在这两种情况下，HTML都是相同的。

我创建了2个CodePens，一个使用HTML/CSS，另一个使用相同的HTML和错误的CSS。问题出在页脚区域。如果出现错误的CSS，则“底部栏”会跳到上方的主页脚中。但是，我想我已经正确清除了浮动。

以下是我认为是CSS的错误部分（但将其与HTML一起查看更有意义-请参阅下面的CodePen链接）：

footer{
    font-family: 'Open Sans', sans-serif;
    margin-top:200px;
    border-top:6px solid rgba(246, 246, 246, 0.8);
    background-repeat:repeat-x;
    background-position:left bottom;
    background-size:contain;
    background-color:#b8b8b8;
}

.footer-column-container{
    width:95%;
    max-width:1200px;
    list-style-type:none;
    margin:0 auto;
    padding:25px 0;
}

.footer-column-container li{
    float:left;
    padding:20px 5px;
    width:25%;
    box-sizing:border-box;
}

.footer-column-container ul {
    list-style-type:none;
}

.footer-links{
    height:250px;
}

.footer-links li{
    float:none;
    display:block;
    line-height:12px;
    padding:8px 0;
    width:100%;
}

.footer-column h4{
    color:#fff;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
}

.footer-column a:link{
    font-size:14px;
    text-decoration:none;
    color:#fff;
}

#bottom-bar-container{
    background-color:#000;
    border-top:1px solid #393939;
    padding:20px 0;
}

#bottom-bar{
    font-size:12px;
    margin:0 auto;
    width:95%;
    text-align:center;
    color:#fff;
}

这里有很多代码，因此，我将列出指向CodePens的链接，而不是将其全部放在此处：

链接到有效的HTML/CSS：http://codepen.io/Ben10/pen/VjBgyB

链接到有效的HTML / Faulty CSS：http://codepen.io/Ben10/pen/pbkYAd

非常感谢您的帮助。

最佳答案

您有浮动问题，因此在clear:both;上使用#bottom-bar-container

#bottom-bar-container {
  background-color: #000;
  border-top: 1px solid #393939;
  clear: both;
  padding: 20px 0;
}

要么


  使用overflow: hidden;到.footer-column-container


希望对您的目标有所帮助

关于html - 页脚CSS无效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38691007/