html - 为什么我的背景在这个简单的 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;
}​

也在JSFiddle 上。

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

Answer 1

见http://jsfiddle.net/uZs92/2/

添加

.footer {
    overflow:hidden;
}

当容器内有浮动元素时，您可以：

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

Answer 2

页脚确实变红了，但由于它的所有内容都是浮动的，所以它里面没有任何东西可以阻止它的高度0。

设置overflow: hidden它，以便浮动元素会影响它的高度。