When floating an element it is taken out of the document flow. As a result, anything containing the floated element does not take on its width or height. Like most developers, to overcome this problem I applied an extra clearing DIV below the floated element. But this isn't ideal as it just added more unmeaningful elements to the HTML document.Luckily there's a nice alternative. Just apply an overflow:hidden CSS rule to the floated elements parent container, problem solved! This has the same effect as the above but without the added markup. Miles better I must say.
I found this little gem in Andy Clarke's book: Transcending CSS.
