Why doesnt it work without overflow hidden?

Question

i was just looking into html / css on w3schools when i found this code example below. I was wondering why it only displays the list when the ul has the "overflow: hidden; " Since the definition of overflow hidden is: The overflow is clipped, and the rest of the content will be invisible

Thanks for every answer :)

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

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

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

When you have elements inside that are floated, the overflow hidden will make sure that they can still be seen. It is a bit of a hacky way to make sure that the ul element doesn't collapse. — Daniel, Oct 08 '16 at 15:55
Possible duplicate of [CSS background color not showing up unless I add overflow:hidden? Why?](http://stackoverflow.com/questions/6479018/css-background-color-not-showing-up-unless-i-add-overflowhidden-why) — Varin, Oct 08 '16 at 16:02
You should not be using w3schools as reference, it is just plain outdated. In that example they use `overflow: hidden;` in the `ul` container to implement a clearfix. You can read more about that [**here**](http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use). You can see how in this [**demo**](https://jsfiddle.net/rickyruizm/3n93xxhz/) you will get the same result using another clearfix method. — Ricky Ruiz, Oct 08 '16 at 16:03

score 1 · Accepted Answer · answered Oct 08 '16 at 16:05

By example:

The image in the following divs is floated. The first div has the property of overflow:hidden;. In the result it can be seen that the first div will facilitate the content by adapting in size, but the second div remains collapsed. The float property has a way of taking the element out of the document flow, but the overflow:hidden; restores that. It seems a bit counter intuitive.

#div1, #div2 {
  border: 2px solid green;
  margin-bottom:5px;
 
  }

img {
  float:left;
  }

#div1 {
  overflow:hidden;
  }

<div id="div1">
<img src="http://placehold.it/200x100"></div>
<div id="div2">
<img src="http://placehold.it/200x100"></div>

Why doesnt it work without overflow hidden?

1 Answers1