-1

If one checks the following code:

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;
}
<!DOCTYPE html>
<html>
<head>
</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>

For a nav bar where elements are floated to the left, it seems imperative to set the overflow property of "ul" as "hidden". If this property is not set then the nav bar disappears completely. Why is this?

Thanks

elementzero23
  • 1,389
  • 2
  • 16
  • 38
Mathias
  • 555
  • 1
  • 8
  • 19

2 Answers2

0

If you dont do so, the <ul> is not inside the text flow I guess. The right way to do this here is to not use the overflow attribute but float: left;

Mr. K. O. Rolling
  • 268
  • 2
  • 14
0

This has to do with what is known as a block formatting context. Establishing a new BFC means that it is responsible for its own layout, especially when dealing with floated elements.

You could also have written overflow: auto. Basically, any other overflow value than visible (which is default) would make the nav bar visible.

Read more about BFC's here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

MateBoy
  • 454
  • 1
  • 4
  • 14