css - 使用 float :left 时背景颜色出现问题

Question

CSS:

ul#navlist {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
    color: #fff;
    background-color: #036;
}

ul#navlist li {
    display: inline;
}

ul#navlist li a {
    float: left;
    width: 5em;
    color: #fff;
    background-color: #036;
    padding: .2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
}

ul#navlist li a:hover {
    background-color: #369;
    color: #fff;
}

HTML:

<ul id="navlist">
  <li><a href="#">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
</ul>

问题:

如果我删除此行:ul#navlist 中的 float:left，background-color: #036; 将不会显示，为什么？

Answer 1

float 元素会将其从正常文档流中移除。这就是为什么您必须在父元素上建立 block 内容或明确清除 float :

/* All of the following will work: */

ul#navlist {
    float: left;
   /* problem: the element itself is removed from the document flow */
}

ul#navlist {
    overflow: hidden;
    /* problem: dropdown lists will get truncated */
}

ul:after {
    content: "";
    display: block;
    clear: both;
    /* problem: compatibility with older browsers */
}

可能的其他解决方案是不 float li/a 而是使用 display:inline-block ，这会带来一个新问题元素之间的空白显示为“魔术边距”。

所有这些方法都有一定的限制，您应该选择最适合您的一种。