css - Div导航栏背景颜色不显示

Question

所以我的问题出在 CSS 上，在我看来，我的“背景”被覆盖了，它最终不会产生淡蓝色的背景颜色。有想法该怎么解决这个吗？另外，如果我只有第一部分 .nav，那么颜色就会显示出来，但是一旦我开始添加其他所有内容，它就会消失。

.nav{
  height : 40 px;
  background: blue;
}
.nav ul{
  margin: 0;
  padding: 0;
}
.nav ul li{
  list-style: none;
}
.nav ul li a{
  text-decoration: none;
  float: left;
  display: block;
  padding: 10px 20px;
}

Answer 1

像这样为 nav 尝试 Clearfix: Demo

HTML:

<div class="nav clearfix">
    <ul>
        <li><a href="#">Test</a>
        </li>
        <li><a href="#">Test</a>
        </li>
        <li><a href="#">Test</a>
        </li>
        <li><a href="#">Test</a>
        </li>
    </ul>
</div>

CSS::

.clearfix { display: block; }

.clearfix:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}