height is 0 in this code, why? (it has to do with overflow:hidden)

Question

Please refer to the following code:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
 border: 1px solid red;
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/  /* Remove this comments */
    background: yellow;
}

li {
 border: 1px solid red;
    float: left;
}

li a {
    display: block; /* what is this used for here? */
    color: black;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color:red;
}
</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>

I would like to know why list height is zero, even though there are list elements in it?

If you comment in overflow:hidden in the css, then the list gets a proper height other than zero. Can you tell the reason?

Specifically, a [mcve] demonstrating the problem (not a dump of all your code). — T.J. Crowder, Feb 17 '18 at 16:57

score 7 · Answer 1 · answered Feb 17 '18 at 17:09

7

The height of your ul is zero because you're floating your child elements which, in essence, removes them from the layout of the containing list.

If you also float your ul, you'll see that it contains your child li elements and the height sizes itself as I believe that you're looking for it to do.

There is some further context on how float impacts page flow here, if you're curious.

answered Feb 17 '18 at 17:09

Jesse Squire

6,107
1
27
30

when i added float:left to the list as well, it indeed got fixed. – HKN Feb 17 '18 at 18:02
But why overflow:hidden in the css also effects this, any ideas? – HKN Feb 17 '18 at 18:03
On that, I'm not certain. Frankly, I'm surprised by it and have it on a list to poke into at a later point. – Jesse Squire Feb 18 '18 at 21:59

height is 0 in this code, why? (it has to do with overflow:hidden)

1 Answers1

Linked