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>

问题：

如果我删除此行：float:left ul#navlist，background-color: #036;将无法显示，为什么？

Answer 1

浮动项目会将其从普通文档流程中删除。这就是为什么你必须在父元素上建立块内容或明确清除浮点数的原因：

/* 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 */
}

可能的其他解决办法是不浮动li / a，而是使用display:inline-block代替，这会在显示为“神奇边距”的元素之间产生新的空白问题。

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

Answer 2

用于此和删除 float left;

    ul#navlist:after{
        content:'';
        overflow:hidden;
        clear:both;
        display:table;

    }
ul#navlist li {
    display: inline-block;  // add this line
    vertical-align:top;  // add this line
}

ul#navlist li a {
    display:block; // add this line and remove float left
    width: 5em;
    color: #fff;
    background-color: #036;
    padding: .2em 1em;
    text-decoration: none;
    border-right: 1px solid #fff;
}

<强> Demo

使用float：left时出现背景颜色问题

2 个答案: