html - 页脚 CSS 不起作用

Question

我为 HTML 页面设置了一些 CSS 样式，一切都按预期工作。然后我编辑了 CSS(最低限度)，突然布局中断了。我有一份原始(有效)CSS 的副本，所以我可以使用它。但我想弄清楚我做错了什么。

所以，我花了几个小时检查有问题的 CSS，但我就是找不到它不正确的地方。希望大侠指出错误。

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

我创建了 2 个 CodePens，一个具有工作的 HTML/CSS，另一个具有相同的 HTML 和错误的 CSS。问题出在页脚区域。使用错误的 CSS，“底部栏”会向上移动到上面的主页脚中。但是，我认为我已经正确清除了 float 。

下面是我认为是 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/错误的 CSS:http://codepen.io/Ben10/pen/pbkYAd

如果你能帮助我，非常感谢。

Answer 1

you have a floating issues so use clear:both; on #bottom-bar-container

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

或

use overflow: hidden; to .footer-column-container

希望对你的目标有所帮助