Float似乎删除了背景颜色

Question

我正在尝试创建导航菜单，我已将float: right;添加到css中的li标记中，我还有一个名为.header的div，它恰好是菜单。

出于某种原因，当我添加浮动时，背景只会消失，当我移除浮动背景时，背景已经回到原位。

body{
    margin: 0;
}

.header{
    width: 100%;
    height:  10%;
    background: #616161;
}
ul#nav{
    list-style: none;
}
ul#nav li{
    display: inline-block;
    padding-right: 25px;
    float: right;
}

HTML

<div class="header">
 <ul id="nav">
   <li><a href="#">Website</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
 </ul>
</div>

我的代码是纯粹的，没有css，没有边距，只有可能导致背景定位问题的显示。

是否有可能将文本保持在正确的浮动和背景中？

使用浮动之前和之后：

Answer 1

在</ul>之前放置此行DEMO

<div style="clear:both"></div>

它应该工作或添加

.header {overflow:hidden;}

正如@MaryMelody所建议的那样 - DEMO 2