By what witch craft would “overflow:hidden” make that work?
simple: box model. all elements have their place in the DOM and all elements have a box model.
your code:
<ul class=“test2” id=“list2”>
<li>Mickey</li>
<li>Donald</li>
<li>Goofy</li>
<li>Robin Hood</li>
</ul>
is a html markup code that will generate a DOM for the elements. that DOM means <ul> will always account <li>s as its children. always. CSS float has no effect on the DOM.
now, if you don’t apply a css style of your own, the default style will generate boxes for all these elements. you may not see this boxes, but these have calculated dimensions. that means that <ul> will be the bigger box, with its dimensions calculated so that it will contain all the <li>s little boxes.
what happens when you float <li>s by using the css float left? than the <li>s are taken out of the normal flow, that is, the flow inside the <ul>, which has nothing to do with the overall document flow. how this taken out of the normal flow translates in presentation: the <ul> box model dimensions are now calculated w/o regards to the <li>s little boxes dimensions. that means, if <ul> has only floated elements, their boxes will not command the <ul> dimensions to grow over zero, the normal box model dimension for an empty element.
this disregard for the <li>s boxes dimensions in calculating <ul> box model gives us the next thing: overflow. obviously, if the parent has a box model that cannot contain its children boxes, we’ll have an overflow.
overflow has the default value visible. setting it to hidden will have the effect in recalculating the box model for the <ul>, which in return will make the <ul> VISUALLY containing its children again. but he was always aware that it was containing them. it just couldn’t cope with their box model dimensions, that’s all
that is to say that <ul> was always aware its having children elements, because CSS float has no effect on the DOM. it just disregarded their box model when calculating its own, because that’s what float means.