html ul overflow,html - What does overflow: hidden do for ul tag? - Stack Overflow

I'm creating a multiple column list using the directions from this article:

In a nutshell, it says to do something along the lines of this:

HTML:

• Item1

• Item2

• Item3

CSS:

.block {

border: 1px solid black;

padding: 10px;

}

.block ul {

width: 100%;

overflow: hidden;

}

.block ul li {

display: inline;

float: left;

width: 50%;

}

And it works wonderfully, but I was mind-boggled at the overflow:hidden CSS declaration.

Without it, my outer div collapses like so:

When it's included, the outer div behaves exactly as how I would want it to be:

I'm wondering why overflow: hidden is triggering this behaviour. I would expect it to cutoff the inner li items instead of forcing the outer div to expand to the necessary height.

Thank you for looking!