html - float 似乎去除了背景颜色

<分区>

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

由于某种原因，当我添加 float 背景时，背景就消失了，而当我删除 float 背景时，背景又回到了原来的位置。

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，没有边距，只有可能导致背景定位问题的显示。

是否有可能将右浮动文本和背景保持在一起？

float 前后使用:

enter image description here