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。

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

在overflow: hidden

div

浮动div
使用clear:both在浮动列表后添加一个元素 - 这可以使用:after伪元素

以下是使用第一个解决方案的演示：http://jsfiddle.net/FSH4Y/

我补充说：

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

以下是有关此问题的更多信息：CSS Tricks: All About Floats - 请查看名为 The Great Collapse

的部分

Answer 2

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

这样的div

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

这将允许浮动元素的父级正确计算它的高度。

Answer 3

你需要浮动包含div的背景。一旦你浮动内部ul，包含div实际上没有内容，所以最终高度为0。

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

3 个答案: