CSS水平菜单浮动左侧背景颜色

Question

在下面的代码中，为什么ul元素在浮动子元素时会失去其背景颜色？

我记得读过有关花车的事情，但我记不起来了。

（JSFiddle）

＆＃13;

＆＃13;

ul {
  padding-left: 0;
  background-color: #036;
}
ul li {
  float: left;
}

＆＃13;

<div id="nav">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

背景颜色在那里。但是你看不到它，因为它在li标签后面。要查看它的位置，您可以在ul属性中添加高度标记，然后您将看到背景。

ul {
  padding-left: 0;
  background-color: #036;
  height: 40px;
}
ul li {
  float: left;
}

要正确解决此问题，您可以向UL标记添加clearfix类并添加以下CSS

.clearfix {
    content: "";
    display: inline-block;
    clear: both;
}