zahnster

Clearing floats have always been an annoyance for us as web developers, because it requires us to use empty markup. It wouldn’t be that much of a problem, except that using floats for complex css layouts has become somewhat of an industry standard.

Not too long ago a new trick came along which had many css developers feeling lighthearted – a way to clear floats without markup. It was a simple, reliable css method that’s been around for ages – the overflow property. Simply by declaring this (usually to auto or hidden), you are able to extend the parent div over the floated divs, and effectively clear your divs – something you have previously needed an empty block level html element to accomplish.

I am afraid, however, that this trick is too good to be true. While it may work well on simpler projects, the method becomes inherently buggy whenever mixed with or around JavaScript, specifically in the Safari web browser. Additionally, it fails to clear certain divs in IE6.

So, when it comes to clearing floats – I’d say stick to the markup method. At least until a real solution comes along.