Floats: I seek a deeper understanding

No, that’s fine - we all learn something along the way and if I don’t know the answer or there is a flaw in my logic then it makes me research it more thoroughly. I’ll be the first to admit when I’m wrong or only half right.

Actually using overflow (other than visible) for containing floats was my invention back in 2005 and as documented in this old sitepoint article and attributed to me in the [URL=“http://www.quirksmode.org/css/clearing.html”]quirksmode site :slight_smile:

BTW,
Overflow:auto ALSO works. It’s handy if you intend to use AP with any children of the UL which would other wise be hidden hen you use overflow:hidden.

Historical note, since you sought DEEPER understanding, what were are talking about here is simply known as “float clearing”. Other, older and less graceful methods included:

.clear{ clear:both; display:block; height:0}
then adding <span class=“clear”></span> after your last </LI>

this of course meant you had to add extra and non semantic mark up.

Then of course there was:

.clearfix:after{ content:“” ;clear:both; display:block; height:0}
<ul class=“clearfix”>

It used the CSS pseudo element as a clearing shim ( like in the example before , but w/o any markup alterations needed) I always thought this solution was rather clever, however IE tends to stop clever CSS solutions in their tracks for a living.

And thus we now come the overflow:hidden/auto solution. What I would like to know is… how long has the overflow attribute been around in CSS that only in the last year or so has it gained notoriety as way of clearing float.