The modern way to clear floats

[SalmanAbbas007]

The modern ClearFix

Many people here still use 10 years old method to clear floats aka ClearFix, using markup. Which is a terrible coding practice.
( something like.. <div class='clearfix'></div> )

So had to share the better way of doing that using CSS psuedo elements:-

.clearfix:after{
  clear: both;
  content: "";
  display: block;
}

Just put this code in your stylesheet and apply 'clearfix' class to the parent element.

Live Demo: http://jsfiddle.net/ccxRJ/1/embedded/result/

Compatibility: IE8+, FF3.5+, Safari 1.3+, Opera 9.5+ and Google Chrome 2+

There is another method but is often problematic:-

.clearfix {
    overflow: hidden;
}

That's all folks, enjoy

P.S: if u don't know what is ClearFix then this tutorial is not for you.

 

[magca]

Thanks. I didn't know about :after. What else can you use it for?

 

[HenchFile]

Thanks for that .

This is a much better way than I use at the moment. Saved in my fav's :D

 

[SalmanAbbas007]

You're welcome @magca and @papa_face.

Thanks. I didn't know about :after. What else can you use it for?

:before and :after are used to add a pseudo-element before and after an element using css while keeping your markup clean.
So a lot of tricks possible :p We can use them for multiple bgs and borders, see here.

 

[JmZ]

This has been around since CSS2 but using clear divs or applying the 'clear' attribute correctly is still preferred because the ':after' pseudo-element is not supported before IE8 and in older versions of other browsers.

So until everyone stops using IE6 and IE7, professional websites will continue to manage without ':after'.

Same issue with 'content:'.

 

[kaffa22]

Gooood :D:D:D

 

[SalmanAbbas007]

This has been around since CSS2 but using clear divs or applying the 'clear' attribute correctly is still preferred because the ':after' pseudo-element is not supported before IE8 and in older versions of other browsers.

So until everyone stops using IE6 and IE7, professional websites will continue to manage without ':after'.

Same issue with 'content:'.

Yeah these are part of the CSS2.1 spec
Though most people have stopped supporting these old and buggy browsers. Even Twitter, Digg, Youtube and Facebook. And even Microsoft hates IE6 and wants to get rid of it XD
Personally I prefer to show a message to IE6,7 users asking to install an 'additional plugin', ChromeFrame(Webkit goodness in IE =D) or use a modern browser.
IMO only Governmental or similar sites will want to support these ancient browsers now. ffs its 2011 8-)

 

[JmZ]

They want to get rid of IE6 and have almost succeeded.

IE8 was only released in 09 so IE7 is still used by a lot of people and is still widely supported. The top few websites aren't 'most people', most of the web tries to support IE7 at least.

 

[Netguy]

I still know more then 10 people who are uber noobs at computers and use IE6 and when I told them to upgrade , they said no , my computer will be spoiled

 

[SalmanAbbas007]

They want to get rid of IE6 and have almost succeeded.

IE8 was only released in 09 so IE7 is still used by a lot of people and is still widely supported. The top few websites aren't 'most people', most of the web tries to support IE7 at least.

yeah true, it still has 7% marketshare 8-)

@Netguy lol XD