Why does the navigation bar totally disappear from the page if I don't set the overflow of ul.navBar to hidden?
This is happening because the child elements of .navBar are being floated. Floated elements are taken out of the normal document flow and do not take up space. Because the children take up no space .navBar has no height .
Adding overflow: hidden; triggers a new block formatting context that prevents .navBar from "collapsing" when it has floated children.
Some people will suggest using display: inline-block;. Use with caution as each element will have white space around it that will make them larger than you think. Especially when using percentage widths.
Example:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 33.3333%;
}
.inline li {
display: inline-block;
background-color: gold;
}
.float li {
float: left;
background-color: indianred;
}
.flex {
clear: left;
display: flex;
background-color: skyblue;
}
<ul class="inline">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="float">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="flex">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Here's some options on how to handle the white space if you chose the inline-block route.
