Jump to content

Overflow: hidden


Recommended Posts


While preparing a navigation bar I bumped into 

overflow: hidden

I know how it works generally, but I can't understand the meaning in the below example, can someone help and explain?

Whey it's required here?


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

li {
    float: left;

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

li a:hover {
    background-color: #111;

  <li><a class="active" 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>




navigation bar.png

Link to comment
Share on other sites

The parent ul loses it ability to identify the boundary of the floated child elements, so its height becomes zero, so you lose the background colour of #333 showing, overflow: hidden returns that ability, the background now shows, all is good within the world...well this part anyway, not sure about the rest.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...