Clearfix Use It Or Dump It?or Dumpage

Sitepoint Members,
What do you have to say about .clearfix?

One person told me “a pointless useless outdated HTML element”

While perishable press says “…is a useful method of clearing floats.”

Perisable Press’ code :

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

is far different from what a programmer used on my site a few years ago

.clearfix{clear:both;overflow:hidden}

Sorry about that title. You should be able to edit a title.

Thanks,

Chris

There is always more than one way of skinning a cat when it comes to stuff like this. I’ve not had to use the clearfix hack myself. So it’s not really necessary. Dump.

HAHAHAHA!!!

Excuse me while I try my best to stop giggling…

Seen your homepage lately? I did just now. I had to find out what kind of designer you are after reading:

the illegible use of text-shadow and white, the illegible color combinations in the comments section, the absurdly undersized and illegible fonts

Yours isn’t perfect is it? Design-wise it’s an eye sore from 1999. That’s just for starters. :rolleyes:

I don’t think I’ll be taking you seriously either. I never take incoherent ranters seriously anyway. :rolleyes:

run the “perishable tweets” or the comments section through the numbers.

I keep forgetting you surf with JS on. Turning it on there, seeing some tweets… I do use twitter, but it’s still for the most part freaking useless. …actually doesn’t bother me that the tweets aren’t the easiest things to read. Though again since I’ve ctrl++'d 3 times, it’s doable.
Comments on most sites, though, I like to read, but usually I can’t start hunting around for the disqus JS until after I’ve allowed the main domain since most places seem to use their main domain scripts to call the disqus scripts.

Which again is using scripting to show plain-text content. Something I’ll never understand.

Their sidebar and all comments are 14px – BUT, look at their font stacks. Lucida family are typically 15% smaller than arial/nouveau fonts, so much like serif fonts you take 2 or 3px or more off – which is why they’re rendering here the same as 11px and 13px equivalent to arial. (as evidenced if you neuter that massive font-stack)

Though the keyword is PX. Again, it’s called %/em – USE IT.

Aye, 'tis true… and you were looking at the BETTER parts. run the “perishable tweets” or the comments section through the numbers.

It’s an old Firefox bug that never really got fixed. I believe its related to the same bug where an empty clearing div won’t clear in FF2- unless it has height or content. It probably strips the space and although it contains the floats it allows margins to collapse right through and you can get some weird effects if following elements have margins. (I did have an old demo of the bug that’s lying at the bottom of my old computer which I am trying to revive at the moment.)

Why does a dot character stop margin collapse but a space character does not? Does the Firefox browser actually read text???

I’ve used spaces because hiding the . was more trouble than the gap I usually didn’t have anyway because the following element didn’t have a margin (cause top margins are devious and bottom margins are less likely to meet you in a dark alley and…).

Their body fonts are 16px, and while I also have to ctrl++ a few times to make their page actually readable, that’s not an insane size to start with.

But their contrast is 100% retarded. CONTRAST REBELLION

(this is how the text was for me, meaning I must have visited the page some time in the recent past and needed to increase text size so I could read it. It’s really much smaller on my screen if I ctrl-0)

One of the reasons I like to use Gez Lemon’s Web Accessibility ToolBar’s Colour Contrast Analyser is because it can tell me with technical certainty WHY something is a fail.
It’s definitely a fail on all three levels though the plugin does not check to see if there’s a white text-shadow on the bottom.
Not that that helps readability in any way, shape or form.

Anytime i use floats i always use clearfix as sometimes using overflow can yield undesired results depending on the type of project been developed. Personally i have never tried the new clearfix approach because i have used the classic version for so long just because it works great and the old saying goes

“if it ain’t broke why fix it?”

I stick by that as it may be great to keep technologies you use up to date but at the end of the day if what you have works stick with it as i have experienced in the past one small change can make something crap itself which is why i only update if its 100% necessary to do so.

That’s just my 2 cents.

I have not in the past six years seen a use for clearfix, clearing div’s or any of the rest of that nonsense in a single layout I’ve coded. The natural wrapping behaviors of float containers, overflow on containers, haslayout for legacy IE gets the job done just fine.

EVEN if you are using clearfix’s CSS, there is NOT excuse to be bloating out the markup by giving it a class when you should be just targeting the element. That turns it into presentational CSS, defeating the point of separating your presentation from the content in the first place. At that point you might as well start using idiotic classes like “width960”, “left” or the all-popular “smalltext” – which basically screams “my head is still wedged up HTML 3.2’s backside!”

class=“clearfix” is an idiotic construct used by people who are too lazy to learn to code a layout properly… that or they don’t have the cojones to kick the artsy fartsy “but it works in photoshop” nimrod in the junk.

Overflow:hidden works fine in the majority of cases – and don’t give me that “what if you want a element hanging out” nonsense either – if it’s supposed to be outside the container, what the devil is it doing inside it in the markup?

It comes in handy, like anything else. But consider that you can clear floats by floating the container and giving it 100% width. or using a natural sibling, if that’s not an option overflow:hidden; is a graceful alternative; also you can change the display mode ( table, inline block, etc.)… but that has its issues… so if all of hat fails ,clearfix becomes and option.

As DS60 said, whatever method chose you DONT necessarily have to use it as a class that you slap around to all wrappers, you can create the rule in your CSS and add to all the elements that need it, that way you dont clutter your markup.
EG:
#contentwraper,.someWrap,.anotherClassThatNeedsIT,.hasFloatsInIt{overflow:hidden;}

Oh, I’d also point out that this:

  • html .clearfix { zoom: 1; } /* IE6 */
    :first-child+html .clearfix { zoom: 1; } / IE7 */

Can often cause more problems than it solves. In some layouts haslayout can CAUSE errors rather than fix them… particularly zoom since it also trips the seldom discussed “zoomfix” on things like LI, a different behavior from haslayout. (though that’s more of a IE7 specific thing).

What is that div, why does it exist, does it have an ID on it or a parent with an ID on it?

It might even be a completely unnecessary div as the behavior may be better placed on all those div being closed above it (though really closing 4 div at once usually means excess/unnecessary div in the layout in the first place!) – but without seeing the CONTENT being plugged into the code, anything we tell you is guessing wildly.

Remember, semantic markup with meaningful names on the elements FIRST, THEN worry about layout and CSS; this is where the majority of coders who thought HTML 3.2 was the be-all end-all and still vomit it up today with a tranny doctype on it really tend to drop the ball.

If it’s the page you pointed to on my visitor page, then it’s DEFINATELY an unneccessary element as that’s not even applying clearfix correctly, and is instead treating it like the old clearing DIV – at which point all .clearfix needs to be is “clear:both” and forget the rest.

This:


<div id="colmid"><div id="colleft"><div id="col1wrap"><div id="col1">

and this:


</div></div></div></div>

being pointless wasteful and for the most part presentational markup. Has no place on the page… see the rewrite I did for you that did away with that and while it has almost as many DIV, those DIV have meaningful names saying what things are on them, and doesn’t need that clearfix nonsense as #columnWrapper is handling that. (with width:100% and overflow:hidden;)

You did get that link for the rewrite via PM, right?

Where you have:


</ul>
</div></div></div></div>
<div class="clearfix"></div>

My rewrite has:


		</ul>
	<!-- #secondSideBar --></div>
	
<!-- #columnWrapper, #pageWrapper --></div></div>

Two less div and no clearfix nonsense needed… and comments to tell you what’s being closed.

Dresden,DS60,
When you say - you can create the rule in your CSS and add to all the elements that need it, I’m not sure how to apply clearfix to the elements that needed it. Here’s what the programmer (of a few years ago) has

.
.
.
</ul>
</div></div></div></div>
<div class=“clearfix”></div>
</body>
</html>

Thanks,

Chris

DS60,
I did get the rewrite in your PM. I really appreciate the rewrite, but applying it to my site would be a real overhaul for my skills and not being a skilled programmer, making the changes will take me a year and a day all to save a few divs.

If nothing else, I’ll change
.clearfix{clear:both;overflow:hidden}

to .clearfix{clear:both} like you were saying.

Thanks DS60,

Chris

DS60,
If I place the divs where you have them, making the change should be easy- it will save me from having to try to visulaize what div is doing what. I ran your rewrite through
Yellowpipe - Lynx Viewer

and the left and right columns did show up last as I want. So the last thing is what css will I use for
<div id=“pageWrapper”><div id=“columnWrapper”>
<div id=“contentWrapper”><div id=“content”>
?
Would you send me the css you used to make that page?

Thanks,

Chris

The directory on the link is wide open. just pull off the template.html from the URL and you’ll have access to all of it.

Got it. Thanks

As an aside the perishable press clearfix version is broken anyway because they have removed the dot from the content property which was put in place to stop margin collapse. Without the dot Firefox will collapse a following element’s margin onto the main parent.

example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<style type="text/css">
* {margin:0;padding:0;}/* for testing only */
h1 {
    background:red;
    height:100px;
}
#content {background:#bbb}
#bg {background:#ccc;}
.inner {float:left;}
p.footer {
    margin-top:100px;
    background:#fcf;
    clear:both
}
#bg:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";/* add a dot here to stop margin collapse */
    clear: both;
    height: 0;
}
#bg{zoom:1.0}
</style>
</head>
<body>
<h1>header</h1>
<div id="content">
    <div id="bg">
        <div class="inner">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
    <p class="footer">Footer </p>
</div>
</body>
</html>


In Firefox you get a big gap between the header and the content and not between the footer and the content as shown in other browsers. It’s the same bug you get in Firefox if you use an empty clearer div (<div style=“clear:both”></div>) without adding a height or content or overflow:hidden.

Paul,
Perishable has some pretty nifty code on their site. Too bad they didn’t catch that error.

Chris

Given the inaccessible illegible train wreck of outdated web rot said site is filled with…

Methinks we have a different definition of “nifty”. :smiley:

The site it’s on ALONE should be enough to tell you not to take advice from them… like the illegible use of text-shadow and white, the illegible color combinations in the comments section, the absurdly undersized and illegible fonts – and that’s before you look under the hood at the turdpress train wreck of statically inlining the HTML 5 shiv stupidity, non-semantic markup, and other “We think HTML Strict was a horrible idea” nonsense that shows that whoever is behind that site needs to do the world a favor, back the blazes away from the keyboard, and take up something less mission-critical like macramé weaving.

But what can you expect from people actually think Wordpress is a good thing.

DS60,
I’m not a wordpress fan either.

Chris