Clearing the clearfix

.Clearfix is a classname which is used often on websites to make sure that a wrapping box gets the height of all it’s (floating) children. This means that child elements will not stick out of the box if they are floated (float: left/right)

A lot of people love the .clearfix, it has been introduced somewhere in 2004, which is a while ago. I was using the .clearfix a lot, and I loved it! Until… Someone @fronteers ( told me what I am about to tell you now..

Do not use .clearfix! In 2004 it was a nice way to go, but that is a while ago…


Actually the ‘real solution’ was found in 2005 already. overflow: auto. This has nearly the same effect as .clearfix. Back then, I noticed that overflow: auto, gave scrollbars. So I went back to .clearfix, never realizing another solution..

overflow: hidden!

overflow: hidden has nearly the same effect as .clearfix has, which is really nice. I’ve been using this quite some time now, but forgot to write something about it, until I was checking the source of a website. I read somewhere that using overflow: hidden might cut off images if they are on the bottom of that element. I have not seen it myself, but at least you are warned 😉

So all webdevs out there, check if overflow: hidden/auto does the trick for you, this might make your developing a bit easier and cleaner!


Speak Your Mind