asp.net - 为什么当我 float 列表元素时列表的背景颜色消失了？

Question

当我 float 我的无序列表元素时......背景颜色失败了。为什么？

<style type="text/css">

    .bkgrd-blue { background-color: #094AB2; }

    .application-bar { color: #FFFFFF; }

    .application-bar ul { }
    .application-bar ul.control-bar { list-style: none outside none; margin: 0; overflow: visible; padding: 0; }

    .application-bar ul.control-bar.branding { float: left;}
</style>

<div class="application-bar bkgrd-blue">
    <ul class="control-bar">
        <li>
            This is working!
        </li>
    </ul>
</div>

<div class="application-bar bkgrd-blue">
    <ul class="control-bar branding">
        <li>
            The moment I float this...it fails! Why?
        </li>
    </ul>
</div>

Answer 1

float 元素会将其从正常文档流中移除，因此容器不会扩展 - 也就是说，包含 div 的高度为 0。

要解决此问题，您需要清除 float 。您可以:

• 在 div 上设置 overflow: hidden
• float div
• 使用 clear:both 在 float 列表之后添加一个元素 - 这可以使用 :after 伪元素来完成

这是使用第一种解决方案的演示:http://jsfiddle.net/FSH4Y/

我补充说:

.application-bar {
    color: #FFFFFF;
    overflow: hidden;
}

这里有一些关于这个问题的更多信息:CSS Tricks: All About Floats - 查看名为The Great Collapse

的部分