<ul> is not collapsed even though <li> are floated? - html

Question

What I know so far is that a parent with nothing but floated children has no height.
In the header for example, I have the left logo floated and the text has an absolute position. The only thing keeping the header from collapsing is the right logo.
header {
position: relative;
font-family: "Felix Titling Regular", Times, serif;
border-bottom: 2px double white;
font-size: 0;
}
header a {
display: inline-block;
}
header>a:first-child {
position: relative;
padding-left: 3%;
}
header>a:last-child {
float: right;
padding-right: 3%;
}
#center-wrapper {
position: absolute;
left: 50%;
top: 25%;
font-size: 16px;
}
header h1 {
font-size: 300%;
display: inline-block;
position: relative;
text-transform: capitalize;
right: 50%;
}
<header>
<img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" />
<div id="center-wrapper">
<h1> loyal capos to the don </h1>
</div>
<img src="media/logo-small.png" alt="Godfather Logo" title="Godfather Small Logo" />
</header>
However, I don't understand why my first parent 'ul' in the 'nav' still has height even though all the li elements are floated.
nav {
position: relative;
border-top: 2px double #660000;
text-align: center;
font-size: 0;
background-color: #660000;
}
nav>ul {
display: inline-block;
font-size: 16px;
width: 100%;
}
ul {
list-style-type: none;
}
nav>ul>li {
min-width: 20%;
float: left;
}
nav ul ul,
nav ul ul ul {
position: absolute;
display: none;
width: 100%;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li:hover>ul {
left: 100%;
top: 0%;
display: block;
}
ul>li {
position: relative;
padding: .4em 0;
background-color: white;
}
li>a {
color: #660000;
text-decoration: none;
text-transform: capitalize;
font-size: 150%;
font-family: "Felix Titling Regular", Times, serif;
background-color: white;
}
<nav>
<ul>
<li>wiki</li>
<li>media
<ul>
<li>images</li>
<li>videos
<ul>
<li>best scenes</li>
<li>bloopers</li>
</ul>
</li>
</ul>
</li>
<li>home</li>
<li>facts</li>
<li>about
<ul>
<li>feedback</li>
<li>contact us</li>
</ul>
</li>
</ul>
</nav>
Here's my code on fiddle (https://jsfiddle.net/vwb6g740/1/)

Answer 1

This is true for block elements and inline elements, but not for inline-block elements.
What I know so far is that a parent with nothing but floated children has no height.
You have display:inline-block; set on that parent element.
I can't explain why, but I can reproduce that behavior.
p {
display: inline-block;
background: blue;
}
div {
background: red;
}
span {
background: green;
}
i {
float: left;
}
<div><i>test</i></div>
<span><i>test</i></span>
<p><i>test</i></p>