The “overflow hidden” technique has been working for me lately.
Thierry also caught that bug and has an improved version here and talks about [URL=“http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/”]why clearfix gives different results depending on browsers.
Dumb it. Ever since deathshadow60 recommended I drop it I kind of did. Never had to use it since.
Many professional sites use ClearFix solution, but considering they don’t have to, then why do so. Makes little sense is doing something you could rather do without.
From personal experience I could get my clearFix’s to look the same in all browsers. I used line-height:0px; font-size:0px and by putting in an empty space. in the div, it would somewhat fix the browser consistency problems.
I can’t tell from that page which version he is saying to use. Is it the last one?
Yes 
It wasn’t very clear was it.
Haven’t read every post in detail, but I agree for the most part with deathshadow60 on this one. I rarely use them—these days never. If my head mentions the word “clearfix”, I automagically ask myself what I’ve done wrong. I want my site/app code to be semantic, neat and tidy, and the word “clearfix” makes the whole thing a bit dirty in my opinion.
EXACTLY!!!
There’s a lot of stuff people do on sites that REALLY needs to fall into that category – see IE conditional comments for CSS embeds, WORSE IE Conditional comments just for the HTML tag, classes or ID’s on body (that aren’t for changing via scripting), static CSS or Scripting in the HTML, etc, etc, etc…
Or even just adding DIV#nav around a perfectly good UL… or DIV#header around a H1 and UL… or <td class=“title” colspan=“7”> – Things that in 99% of layouts are just pointless bloat. Things that should immediately make you ask the question:
What am I doing WRONG?
But of course since most people aren’t smart enough to ask that question, we now have HTML 5 legitimizing half-assed coding practices instead.
Not to long ago deathshadow60 you said this:
With that said, it is easily possible to target an empty div or span without a class as a clearfix. I mean… empty elements don’t hurt – right?
I’ll betcha that your bug goes away if you state content like so:
content: “\a0”;
I was fiddling with display: inline-block and had this weird shifting with the one element who had " " (space) as content :before it instead of “|”. Changing " " to “\a0” fixed the layout issue there.
Yes I think a non breaking space would do the job as well as the usual dot “.” I haven’t tested though:)
I have to agree with everyone on the anti .clearfix:after {} thing. Overflow:hidden. It works. It’s simple. Done.
Well… and a haslayout trigger for IE… and every now and then if you can’t have overflow chopped off, there’s always float + 100% width, since floats… wrap float, and if it’s 100% width nothing can ride up next to it.
In a lot of ways it comes down to knowing ALL the different ways you can find to do things, and then choosing the right one for the job…
Just so happens I’ve never seen a right job for ‘clearfix’.
and a haslayout trigger for IE…
Still add separate trigger for 6.
I find myself using :after more and more because I’m building boxes whose content in the future I won’t know if it matters if content overflows or not. What you get when people want working pages without planning first sigh