.clearfix class vs :after

Question

Which is better when floating elements to left right?

Using a generic .clearfix class:

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

which you can re-use and apply it to container elements:

   <div class="some-section clearfix">
     <div class="align-left"> left </div>
     <div class="align-right"> right </div>
   </div>

   <div class="some-other-section clearfix">
     <div class="align-right"> right </div>
   </div>

or specific clearing rules like:

.some-section:after, some-other-section:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

?

possible duplicate of [Which method of 'clearfix' is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — Wesley Murch, May 16 '12 at 01:50
@WesleyMurch not so much. The OP is asking how to apply the rules, not which rules to apply. — steveax, May 16 '12 at 01:53
@steveax: No, the OP is asking which one is "better". "how to apply the rules" is already in her post. — Wesley Murch, May 16 '12 at 01:54
@WesleyMurch note: the style rules in both of the code blocks are identical. The only difference is whether to apply them via a `clearfix` class or include the rules directly to all elements that need clearing. — steveax, May 16 '12 at 01:57
@steveax: You're correct, the title misled me - but the link should still be useful. — Wesley Murch, May 16 '12 at 01:58

score 1 · Answer 1 · answered May 16 '12 at 01:35

1

I personally prefer .clearfix since it has the most browser support - IE6&7 don't support :after selector. In addition, you can define clearing properties in one place and add the class anywhere you need to use them. If you keep using :after on per-element basis, you'll end with a lot of duplicated CSS.

answered May 16 '12 at 01:35

MK_Dev

3,291
5
27
45

The OP is asking whether to add a `clearfix` class to all elements that need it or to apply the same style rules to every class/id that need it - in either event, the style rules applied are identical. I prefer to use a CSS meta-language (Sass) and use `@include` so I don't have to sprinkle non-semantic classes in the html _and_ the clearing rules are in only one place. – steveax May 16 '12 at 01:44
@steveax, thank you for reiterating what the OP wanted to know. From my experience with includes, unless styles are one or two lines long, you end up with a lot duplicated code and a bloated css file. There are times and places where "non-semantic" classes are appropriate and useful. – MK_Dev May 16 '12 at 16:54

score 1 · Answer 2 · answered May 16 '12 at 01:35

1

Neither, really. Internet Explorer 7 and earlier don't support pseudo-elements, so here's what I use:

.clearfix {
    clear: both;
}

and

<br class="clearfix" />

It's nearly semantic, works even in IE 6, and is really nice and clean.

answered May 16 '12 at 01:35

Ry-

218,210
55
464
476

1

There are other CSS methods for clearfix that don't involve rubbish markup or pseudo elements: http://stackoverflow.com/a/1633170/398242 *"Really nice and clean"*? Far from it! *"nearly semantic"* - makes no sense! – Wesley Murch May 16 '12 at 01:49
1

IE6/7 have an auto-clearing bug with floated elements that renders clearfix unnecessary. The purpose of using the `:after` pseudo-class with `.clearfix` is to target only those browsers that don't auto-clear. – jaredhoyt May 16 '12 at 01:49
@WesleyMurch: I find it really nice and clean. *Much* cleaner than the answer you linked to. – Ry- May 16 '12 at 02:16
@jaredhoyt: Not seeing that in IE 7. – Ry- May 16 '12 at 02:16
@minitech: The answer I linked to contained the `
` trick, I think you didn't scroll down and see the variety of solutions. Most of the time `overflow:hidden` is fine, and works in IE7, but there is always a way to "clearfix" with only CSS. (`zoom:1`?) I don't have access to IE6 or care about optimizing for it at all anymore to be honest. – Wesley Murch May 16 '12 at 03:01

score 1 · Accepted Answer · answered May 16 '12 at 01:45

With the use of :after, one must considered the cross-browser issue. If we are to provide support for all browsers, including old ones, pseudo-elements may not be the way:

CSS selectors and pseudo selectors browser compatibility

Related to generic class vs specific class

By definition:

A generic class can be applied to any element in the markup, is best suited for use with generic formatting instructions that all elements will support, or for formatting instructions that need to be used on several types of element.

A specific class serves its purpose by only being applied to a specific element in the markup is best suited for formatting instructions which are specific to only one type of element.

The goals for using a Generic Class over a Specific one are: ^{among others}

Cleaner markup
Reutilization
Smaller files (browser contents download performance)
Easy to maintain or update

the only problem with the generic class is that it imposes some limitations to the markup. for example, if I'd want to change alignment of some elements than I'd have to remove the clearfix class from the markup too... — Alex, May 16 '12 at 01:56
I deal with that issue by combining generic classes! e.g. `
Foo bar
` tells the browser that what is defined on `alignL` will have priority over the same declarations at `clearfix`! So, no need to remove, just set them by relevance! — Zuul, May 16 '12 at 02:10

.clearfix class vs :after

3 Answers3

Linked