为什么当我浮动列表元素时，列表的背景色消失了？

Question

我浮动我的无序元素元素...背景颜色失败。为什么？

<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

浮动一个元素从普通文档流中删除它，因此容器不会扩展 - 也就是说，包含的div具有0个高度。

要解决此问题，您需要清除浮子。您可以：

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

这是使用第一个解决方案的演示：http：//jsfiddle.net/fsh4y/

我添加了：

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

以下是有关此问题的更多信息：CSS技巧：关于浮子的所有信息 - 请查看称为的部分collapse

Answer 2

您需要在列表下清除，通常我会添加一个div

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

这将允许浮动元素的母体正确计算其高度。

Answer 3

您也需要浮动包含的div，并带有背景。一旦您浮动内部UL，cont的div有效地没有内容，因此最终以0。