Why does background-color only work with overflow:Hidden?

Question

I’m creating a menu and want to put a background color on it, however, when I try to apply a backgrond-color: #333 in one element ul WITHOUT the overflow: hidden;, the color does not appear.

Because it happens if the overflow has nothing to do with the background color? What does the overflow?

CSS CODE:

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
}

HTML CODE:

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Noticias</a></li>
      <li><a href="#">Contato</a></li>
      <li><a href="#">Sobre</a></li>
    </ul>

Answer 1

The problem is not the overflow.

The problem is that your ul has no height. She gets the color but can’t see...

Behold:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:40px;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
}

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Noticias</a></li>
      <li><a href="#">Contato</a></li>
      <li><a href="#">Sobre</a></li>
    </ul>

> Overflow

This is just the scroll bar.

From what I understand, when you put this feature, you gave a minimum height to ul...

Answer 2

As @Diegosantos just talked of putting a height already solves, but that doesn’t explain why with the Overflow works and without fail.

The explanation is that the overflow changes the context of the element. Here you can read about it: https://makandracards.com/makandra/9245-use-overflow-hidden-to-avoid-floating-elements-from-wrapping-a-container-s-text

Including the same technique as overflow is used to correct problems of the Father’s height when the Sons have some float setado and the father has no height.

Here is the Mozilla documentation that addresses the subject: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

A block formatting context is created by at least one of the following:

• floats (Elements Where float is not None)
• block Elements Where overflow has a value other than > Visible

In your case your <li> has float:left, if you just take it off or put it on display:inline-block the color of BG will appear as the <ul> will gain the height of your <a> who is with display:block.

Now if you want to continue using the float:left the effect that the overflow:hidden makes it that the <ul> assume the height of the child you have display:block in case your <a>. So much so that with the overflow:hidden in <ul> any value of height, line-height, or padding for example that you put in <a> will reflect on the time of the father <ul>

See the example in the case of float:

div {
  background-color: #f00;
  width: 200px;
}
div > div {
  float: left;
  background-color: aqua;
  width: 100px;
  height: 100px;
}
.over {
  overflow: hidden;
}

<div class="over">
  <div>com overflow no pai</div>
</div>
<br>
<div>
  <div>sem overflow no pai</div>
</div>