Why an element disappears with "overflow: visible" but is visible with "overflow: hidden"?

Question

When I use the default overflow value, an <ul> element disappears. Here's a snipped I've tested with Google Chrome:

ul {
  list-style-type: none;
  background-color: #333333;
}

li {
  float: left;
  color: white;
}

<ul>
  <li>Test</li>
</ul>

However, when I add overflow: hidden; to <ul>, it becomes visible:

ul {
  list-style-type: none;
  background-color: #333333;
  overflow: hidden;
}

li {
  float: left;
  color: white;
}

<ul>
  <li>Test</li>
</ul>

As far as I know, the overflow property specifies if the overflow renders outside the element's box. Why the whole element is invisible when the default overflow: visible is set?

Answer 1

because your ul doesn't have a set height

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

from https://developer.mozilla.org/en-US/docs/Web/CSS/overflow