Clearing float elements – :after and clear

It means wrapping some float elements with a container element.

The container won’t auto enlarge if those float elements inside is too large(usually height), but IE will do auto enlarge which is non-stardard.

The W3C float specification requires that a cleared element shall stay below all previous floats.

Anyway, straight to the solution.

Add this to the last float block element.

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

:after means add this element to it. This is a CSS2 property.
IE doesn’t support :after.

But IE need the container to have height define in order to auto enlarge.
So, do this for IE:
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

REMARK: if you have links inside the container and follow by
float element will cause IE/Win Guillotine Bug. So the solution
is put those links inside <p> or other block tag and then give
the height 1% to it.

but there is still problem with IE/Mac, it doesn’t auto clear
and don’t support :after.

Straight to solution, this one fix all of them.

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Thanks to Tony Aslett for showing us the way. His site, csscreator.com is a killer CSS forum where newbies and gurus alike hang out and exchange CSS know-how. Tony’s original demo page for this method can be found here, and the relevant forum thread is here.

Kudos also to Doug for pointing out the “period problem” in FireFox, and to Mark Hadley for that elegant IE/Mac fix, and to Matt Keogh for showing how “inline-table” also fixes IE/Mac while using an already-approved CSS property. Once more the CSS community comes thru for us all! 🙂

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s