CSS浮动元素导致其他元素背景颜色消失

Question

我正在测试CSS，看看它如何在水平菜单中使用浮动元素：

<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 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: cyan;
}
ul#navlist li {
    display: inline;
    background-color: pink;
}

/*ul#navlist li a {
    float:left;
}*/

我使用背景颜色直观地看到受影响的内容。这是输出：

output

注意列表项之间的左边距离。现在当我取消注释/插入以下行时：

ul#navlist li a {
        float:left;
    }

差距消失（我的意图），但ul和li的背景颜色消失了。 Output为什么会这样？

Answer 1

背景是绝望的，因为内容是浮动的，所以父级的高度变为零。实际上，它只是固定在<li>而不是它里面的链接得到了它？！

将<li>显示类型更改为inline-block，并可选择为<li>元素设置高度。