4

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.

felixmosh
  • 32,615
  • 9
  • 69
  • 88
d234kdsafjk
  • 89
  • 5
  • 1
    There doesn't seem to be any logical reasoning as to why this works. I would just file it under 'CSS tricks' and use it when it comes it handy. For more info on floats and overflow (but no clear explanation why it works), see here: https://stackoverflow.com/a/16568504/1195615 and here: https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/ – thingEvery Jan 13 '20 at 08:31
  • Unfortunately, "laymen's terms" and "understand the concept" are somewhat mutually incompatible, not least because there is so much misinformation available. For example, @Terry below, describes `overflow: auto` as "used to clear floats", which is not an uncommon description, and reflects the "clearfix" notion described in the duplicates. Yet it is incorrect, what `overflow:auto` and `display:flow-root` do and what float clearing does are entirely different concepts that happen in this circumstance to have a similar effect. – Alohci Jan 13 '20 at 13:13

1 Answers1

2

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.

Terry
  • 63,248
  • 15
  • 96
  • 118