Skull Jackpot

Various thoughts of minimal interest to others

Design Pattern: Self-clearing floats

January 8, 2009

Originally published on the TOPP Design Blog

Problem Summary

An element needs to be expanded to contain all child elements, one or more of which may be floated (and thus removed from the normal document flow). ­

Use When

The page contains floated elements w­hich should not extend beyond their parent element.


Use self-clearing floats.


While the “use a float to contain a float” approach will ensure that all elements are appropriately contained, it can trigger other renderbugs which this approach avoids.




.selfclear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

.selfclear {
display: inline-block; /* IE 7 */

.selfclear {
display: block;

* html .selfclear {
height: 1px; /* IE < 7 */

Note: this method builds upon the approach documented at

One comment to “Design Pattern: Self-clearing floats”

  1. July 2 2009 at 10:01 pm Cory wrote:

    This was invaluable for something I was just struggling with. Thank you!

Leave a comment

HTML - You can use:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>