Blocks getting invisible

[Lazlo79]

Hi everyone,

I'm a super beginner and I'm learning HTML and CSS.
I have this code for style and the mystery I cannot wrap my head around why the whole list disappears when I take out the "overflow: hidden" line or change its value to visible or scroll etc.

I also read that overflow attribute functions only with blocks when the size is set but in this code I don't see any sizing.
Here is the link to the full code: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black


<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

</style>

Thanks in advance for a short explanation.