Could someone please explain what exactly "Overflow" in CSS does to a background in this example? [duplicate]

Question

I was following a HTML/CSS tutorial and this came up.

HTML + CSS:

body {
  font-family: Arial, Helvetica, sans-serif;
}


/* Navbar Styling */

.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: lightblue;
  border-radius: 5px;
  overflow: auto;
}

.navbar li {
  float: left;
}


/* Side Menu Styling */

.side-menu {
  list-style: none;
  border: 1px #ddd solid;
  border-radius: 10px;
  width: 300px;
  padding: 20px;
}

.side-menu li {
  font-size: 18px;
  line-height: 2.4em;
  border-bottom: dotted 1px #ddd;
}

.side-menu li:last-child {
  border: none;
}

.side-menu li a {
  color: #333;
  text-decoration: none;
}

.side-menu li a:hover {
  color: coral;
}

<ul class="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<ul class="side-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Okay. So the tutorial explains:

1) for class "navbar" and class ".navbar li"

if I remove overflow: auto; from .navbar and float: left; from .navbar li ... the background-color of lightblue shows.

2) If I add float: left; to .navbar li then the background-color dissapears

3) The tutorial goes onto explain that by adding overflow: auto; the background-color appears.

I would like to understand the principle behind this concept. I searched online and this is what MDN states:

"The overflow shorthand CSS property sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y."

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

I'm no programming expert, yet, but I can read English. The element's content in this example are these links, namely "Home", "About", "Services" and "Contact." How, then, does this have anything to do with the background-color appearing and not appearing? What do you mean by "block formatting context?" I read the rest of the MDN documentation; however, I remain confused.

Could anyone please explain to me, in laymen's terms, so that I can understand what's going on? Visual aids are appreciated also. Please explain it to me very simply, and assume that I am not smart. I really want to understand the concept behind this code, and not merely copy code, as I want to use this in the future.

Answer 1

The overflow: auto trick is used to clear floats. Since your .nav element contains only floated children, its own dimensions will collapse to a height of 0 when you do not specify overflow property. That is because when floating child elements, they are taken out of the document flow/layout, and will not add to the computed dimension of the parent element normally.

When the dimension of the parent element collapses, it has essentially no height, and therefore its blue background does not show.

In fact, when setting overflow to anything other than its default value (i.e. overflow: visible), you will be creating a new block formatting context. That apparently has the effect of clearing floats.