Alternate clearing method to clearfix?

[TheFilmGod]

Today I had to use an alternate clearing method. Typically I use overflow: auto; which works like a charm. However, this time I had to overlay an image that want out of its parent's container. This mean overflow: auto; would crop the image out at the border.

 

I ended up using the true clearfix method as an alternate. It seems to work, but I'm a bit skeptical. Some of the other elements on my webpage became puking scrollbars out. It seems like clearfix isn't as foolproof as some say it is.

 

So my question - is their an alternate to clearing aside from clearfix and overflow: auto;?

[wildteen88]

Shouldn't you be using overflow:hidden. Using overflow: auto will cause scroll bars to appear.

[dbrimlow]

Yes, overflow:hidden. Clearfix doesn't generate scrollbars under any circumstances whatsoever.

 

But, I know what TFG is asking for, and yes there are other alternatives.

 

Here is an Eric Meyers article from 2003. Keep in mind he wrote this while most of us were still using tables and "layers" and IE 5.5 was still the top browser. His first solution is no big surprise and all of us tried this without even knowing what it was.

 

It was his second solution, the "use a float to fix a float" that created a buzz and is what some experts still recommend after the clearfix.

 

http://complexspiral.com/publications/containing-floats/

[TheFilmGod]

I don't quite understand why eric meyer is hailed as an expert css developer. The idea behind "use a float to fix a float" is so basic and rudimentary that it makes me cringe to think that Meyer is exulted as an expert for this. I have always did this, without every knowing it was an advanced technique.

 

If you ask me, the geniuses at W3C should stop worshiping Meyer and create some truthfully useful css properties. - stop creating useless - "box-shadow" and "text-shadow" features which could be easily implemented through basic backgrounds. Give me an option to clear all childs within a parent.

 

clear-child: both;

[dbrimlow]

The idea behind "use a float to fix a float" is so basic and rudimentary that it makes me cringe to think that Meyer is exulted as an expert for this.

 

LOL. You DID notice that the article was written in 2003. In 2003 floats were extreme cutting edge stuff. Don't forget, IE 5.5/win and IE 5.1x/Mac were the 90% marketshare browsers!!

 

Ever try to even just position simple floats in IE 5.1x/Mac? Do you know how many bugs IE5.5 win had with floats? This is the reason hacks were created in the first place.

 

Eric Meyer was the first to show everyone how it was done. Clapton is a simple guitarist by todays standards, but in 1967 he blew everyone away.

 

Stop blaming the CSS and place blame where it belongs, the browser creators. clear:both exists. clear:left exists. clear:right exists. Get the damn modern browsers to be spec compliant, get MS to stop lying about becoming valid only to release yet another monster IE piece of crap that breaks all previous solutions.

 

Rage at the machine, not the cogs.

 

By the way, The "modern" clearfix (not the PIE initial method) if used right will do exactly what you want in all browsers - BUT, you may have to add a clear:both element to the non-floated tag following the floated box.

 

 

[TheFilmGod]

Actually, I was only a 5th grader back then.

 

I still don't think developers should worship Eric Meyer. He isn't a css god, or anything. He's just a guy who experiemented a lot with the holy grail of 2003 - floats - and found a neat "hack" to emulate the correct rendering. Hell, if I was 17 back in the day, I probably would have come up with my own potion for clearing divs. Even now, I have several state-of-the-art css techniques.

 

My point isn't too bash Eric Meyer. He's a highly qualified css developer - I'll give him that - but in my opinion, he doesn't live up to his potential. How many geniuses does it take to figure out that a new css property should be added that would clear all childs within a div.

 

clear-child: both;

 

Sure, it would take years for browser developers to emulate this mode and expand their newly upgraded browsers to the public, but at least I could go to sleep soundly knowing that I won't have to spend eternity calculating pixel by pixel to use "overflow: auto/hidden;" or add in clearfix classes which don't work half the time.