What does `overflow:hidden` do in the following example?

Question

My question is, if I remove the overflow:hidden from this code, my entire navigation bar is going to be hidden, so what does the `overflow:hidden; act in this example.

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(100, 100, 100);
}

li{
  float: left;
}

li a{
  padding: 10px 30px;
  display: block;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

li a:hover{
  background-color: rgb(50, 50, 50);
}

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Form</a></li>
</ul>

In your case, `overflow: hidden` tells the parent of children having `float` to expand to its children's size. — Asons, Jun 22 '16 at 05:03
Thanks **@LGSon** for answering my question, I completely understand what you explained.Thanks again!. — , Jun 22 '16 at 05:38

score 2 · Answer 1 · answered Jun 22 '16 at 05:14

In your case, overflow: hidden tells the parent of children having float to expand to its children's size.

Also overflow: auto will do that, like in below sample, which will make the content scroll in case of lack of space, where hidden will hide the same

ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(100, 100, 100);
}

li{
  float: left;
}

li a{
  padding: 10px 30px;
  display: block;
  text-decoration: none;
  color: white;
  font-family: sans-serif;
}

li a:hover{
  background-color: rgb(50, 50, 50);
}

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Form</a></li>
</ul>

What does `overflow:hidden` do in the following example?

1 Answers1

Linked