为什么我的背景在这个简单的CSS中没有变成红色？

Question

HTML

<div class="main">
    Lorem ipsum dolor.
</div>

<div class="footer">
    <p>More lorem.</p>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS

.main {
    text-align: center;
}

.footer {
    background: red;
    clear: both;
}

.footer ul {
    float: right;
}

.footer li {
    display: inline;
}

.footer p {
    float: left;
}​

on JSFiddle。

我简化了我的主要网站的大版本无法正常工作。我的页脚不会改变颜色。看看它是怎么说的红色？

Answer 1

请参阅http://jsfiddle.net/uZs92/2/

添加

.footer {
    overflow:hidden;
}

如果容器中有浮动元素，您可以：

• 将overflow:hidden（或与visible不同的内容）添加到容器中 - ＆gt; http://jsfiddle.net/uZs92/2/
• 在容器的末尾添加clear:both的元素（而不是容器本身） - ＆gt; http://jsfiddle.net/uZs92/6/
• 将:after,::after{content:'.';font-size:0;}添加到容器中 - ＆gt; http://jsfiddle.net/uZs92/5/

Answer 2

页脚确实变为红色，但由于它的所有内容都是浮动的，因此内部没有任何内容会阻止其高度为0。

在其上设置overflow: hidden，以便浮动元素影响其高度。