Herrsocke Herrsocke - 2 months ago 8
CSS Question

Why doesnt it work without overflow hidden?

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>




Answer

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>