Jump to content
Michal

Overflow: hidden

Recommended Posts

Hi!

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>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<ul>
  <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>
</ul>

</body>
</html>

 

 

navigation bar.png

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

True, I would have thought by now! That detection of boundary of child floated elements would have been made permanent, so there would be no need for this fix, I have not come across a case where this would be required.

Share this post


Link to post
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

×