为什么溢出属性会以背景颜色的方式出现？

Question

以下是我的代码（HTML和CSS）。

<ul class="topnav">
    <li> <a href="#Home">Home</a></li>
    <li><a href="#Contact">Contact</a></li>
    <li><a href="#Gallery">Gallery</a></li>
</ul>

ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
background-color: green;
}

ul.topnav li {
float:left;
}

ul.topnav li a {
padding: 14px 16px;
}

使用上面的代码，不会出现背景颜色。然而，当我向样式添加溢出属性并使其隐藏时，它会神奇地出现。这让我怀疑我对溢出属性的理解。有人可以解释发生了什么以及溢出属性究竟是什么？