Simple Clearing of Floats

In Simple Clearing of Floats, Alex Walker describes a really simple way of clearing floats without extra markup that Paul O'Brien came up with. (via

This looks really promising. Being able to make a container expand to contain any floating children without using the clear property lets you use this without worrying about all previous floats being cleared.

In a quick test I did this seems to work well for all current Mac browsers, with the exception of Opera 7.54. It does work in Opera 8 beta though. It did not work in IE/Win, but it's easy to use either the Holly hack or conditional comments to feed IE/Win a simple height:1%;, which will make it contain any floats.

Does anyone know what the CSS specs say about this? Should overflow:auto and overflow:hidden make an element expand to contain any floating children?

Update: I made a quick test case. Try to break it if you like, and report any problems.

Posted on February 27, 2005 in Quicklinks, CSS