Code Snippets Gallery
Force Element To Self-Clear its Children
A.K.A The “Clearfix” hack.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */Just apply a class="clearfix" to the parent element. This is an improved version of the original, and documented here.
Loading ...
just so i’m clear: would this be for child elements that are floated, and thus the parent element disappears?
i’ve found that applying overflow: hidden; to the parent element takes care of this. the parent element then fills in behind the child elements.
Yes that is right, but overflow: hidden; also hides the overflow, which may be undesirable behavior in some circumstances.
overflow: auto;works well as long as you are able to keep control of your margins and padding (else you see scrollbars). That’s ironic. :)
I still use this religiously. I rarely fails me and has worked cross browser extremely well.
Only time I get a hiccup with it is when I had a fluid container that was floated left or right. I would get a large gap underneath one of the elements when clearfix was in place.
Rocking ! I ve always had a confusion on judging whether to use the markup based clear or this one. This is cool … but still have to test it in a pretty bigger application.
Im concerned about the .clearfix{display:inline-block;}, block. Im not sure if this would be 100% perfect in a application of a high volume of markups / complex layouts. Correct me if wrong.
The edit and delete functionality of this comment section just rocks :). Im loving the counter … great user experience and awesome interaction design. Keep it going chris !
Chris – you, like Mary Poppins, are practically perfect in every way, except for it’s and its. So in order to help you attain a higher level of perfection, I am going to give you a free lesson!!!! (are you excited yet?)
Possessive pronouns: his, hers, theirs, ours, mine, yours, whose, and its
Notice no apostrophes on any of those – just think “his, hers, its” to help you remember that.
Contraction: It is shortens to it’s, he is => he’s, she is => she’s, I am => I’m, you are => you’re, they are => they’re, we are => we’re, who is => who’s
For pronouns, the only apostrophes are for contractions as shown above. Regular nouns do use apostrophes to show possession but not pronouns.
So your title for this post should be “Force Element To Self-Clear its Children” (not it’s). I see this mistake a lot in your posts, but this one stands out even more since it’s in the title.
Whew! That out of the way (and seeing those errors really does get in the way of content), you are awesome and I have learned SO much from you – I hope my little grammar lesson actually helps!
And, on topic, thank you for THIS helpful snippet!
Am I really the only one who things there should be a standardized non-hack way of doing this added to CSS3?
Really? I’m the only one? (sad, slow facepalm)
overflow: evelop;
overflow: contain-floats;
float-collapse: none;
SOMETHING, ANYTHING.
You aren’t the only one. I like the third one the best.
Aaaaagreed.
This can be a dangerous technique to use unless authors know exactly what this styling means in term of construct.
See everything you know about clearfix is wrong
The best way to use a clearfix can be found at best clearfix ever. It doesn’t use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.