页脚 CSS 不起作用

Question

我为

CSS

页面设置了一些

HTML

样式，一切都按预期工作。然后我编辑了

CSS

（最少），布局突然中断。我有一份原件（工作）的副本

CSS

，所以我可以直接使用它。但我想弄清楚我做错了什么。

所以，我花了几个小时检查错误的

CSS

，但我就是找不到哪里不正确。希望有人指出错误。

在这两种情况下，

HTML

是相同的。

我创建了 2 个 CodePen，一个可以工作

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

非常感谢您能帮助我。

Answer 1

您遇到浮动问题，因此请在

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

希望对你实现目标有帮助

Answer 2

将以下

overflow:hidden;

添加到您的

.footer-column-container

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

Answer 3

在

<div style="clear:both;"></div>

 之前添加 

<div id="bottom-bar-container"></div>

Answer 4

由于您在 footer-column-container 内使用浮动元素，因此不会自动设置其高度。您需要在

overflow:hidden

CSS 中使用

.footer-column-container

。

那就是

.footer-column-container{

    width:95%;
    overflow:hidden; /*This property is missing*/
    max-width:1200px;
    list-style-type:none;
    margin:0 auto;
    padding:25px 0;

}

这样 div 将容纳其

floating

子元素，即 footer-column-container 内的 li 元素。

您在工作 CSS 中设置了

overflow:hidden

属性。在错误的代码中，缺少该属性。这就是它搞砸的原因。

Answer 5

只需清除div即可。我检查了你需要清除 div 的整个代码。这里更新了fiddle。

我在这里更改你的代码，看看..

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;
    width:100%;
    float:left;
    clear:both;

}

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

有关清除 div 为什么以及如何的更多详细信息，请访问此处。

1. learnlayout.com
2. quirksmode.org
3. css-tricks.com

希望对你有帮助:)

Answer 6

有时无法在 Firefox 浏览器上运行