Best clearfix ever

Around 6 hands all with thumbs up in agreeanceWe rarely name our articles best or ultimate as weI believe these terms are abused quite a lot on the internet. But in this case we are going to make a special exception as the clearfix that we want to discuss we believe is a little bit better than the original.

Most web developers probably know about floating problems and our two basic solutions for them which we'll discuss briefly.

The first solution is the clear div fix which is an extra div we slot in our HTML.

/* Global CSS file */ clear-float { clear:both; display:block; height:1px; margin:0 0 -1px 0; overflow:hidden; width:100%; }

The second solution is to add content after a div forcing it to clear, this is known as the clearfix solution.

/* Global CSS file */ .clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } /* ie CSS file */ .clearfix { zoom:1; }

Both techniques have problems. The clear-float solution is bad as you are adding extra markup to our crisp clean HTML. The clearfix is a problem as you have to add it to all your divs that require the fix. This is time consuming and adds CSS class names when not necessary.

The best solution that we could think of is to create an automatic clearfix. We add this to all our block level elements so we don't get clearing problems. We believe once you start using this and get used to how it works you'll enjoy float elements as you don't need to watch about clearing issues.

** But please note this will change how your websites work as margins will now add to each other instead of collapsing.

/* our Global CSS file */ article:after, aside:after, div:after, form:after, header:after, nav:after, section:after, ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } /* our ie CSS file */ article, aside, div, form, header, nav, section, ul { zoom:1; }

Our clearfix solution now works automatically. Never again do you have to worry about floating problems.