0
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

I think the clearfix method above is both compact and safe. However, I realised that if this method is as good as I think, it should have been the most popular clearfix method, while actually it isn't widely used.

My question is: what potential problem can this clearfix bring?

Here is an example showing how it works:

.container {
  background: silver;
}
.float {
  float: left;
}
/* Is this safe? */

.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
<div class="container">
  <div class="float">
    outer-float
  </div>
  <div class="clearfix">
    <div class="float">
      inner-float
    </div>
    content
  </div>
</div>
nalzok
  • 14,965
  • 21
  • 72
  • 139
  • *while actually it isn't widely used.* .... how do you know that?. Also clearfix on `:before` elements is not usually needed and the only cont of this method is if you need that pseudo-element for another purpose or if you need to support IE7 or below – DaniP Oct 24 '16 at 17:16
  • @DaniP None of the tech blogs I've read recommended or mentioned it. I think if this is really an nice solution, I should be seeing it *everywhere* (tech blogs, SO posts, production code, etc). – nalzok Oct 24 '16 at 17:22
  • welll you may need to get new resources as an example on many question about floats here the first link you get [is this](https://css-tricks.com/all-about-floats/) – DaniP Oct 24 '16 at 17:25
  • 2014 post ... https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/ – DaniP Oct 24 '16 at 17:29
  • @sunqingyao you must be looking in the wrong places. I see it used all over the pace from individual websites to CSS frameworks like [Bootstrap](http://getbootstrap.com/css/#helper-classes-clearfix), [Skeleton](http://getskeleton.com/) and [Foundation](http://foundation.zurb.com/sites/docs/v/5.5.3/utility-classes.html) to name a few. Everyone might not implement 100% exact same way with the same name but they're all building off the same idea. Seems pretty popular and used quite often to me. – hungerstar Oct 24 '16 at 17:29
  • There's plenty of blogs that mention clearfix: [blog 1](http://nicolasgallagher.com/micro-clearfix-hack/), [blog 2](http://cssmojo.com/the-very-latest-clearfix-reloaded/), [blog 3](https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/), [blog 4](http://stackoverflow.com/questions/8554043/what-is-a-clearfix). – hungerstar Oct 24 '16 at 17:29
  • @DaniP Sorry for my misleading words: Of course, clearfix can be seen virtually everywhere, but I've never seen a clearfix method that applies `clear: both` to `.clearfix.before`. – nalzok Oct 24 '16 at 17:35
  • @hungerstar Sorry for my misleading words: Of course, clearfix can be seen virtually everywhere, but I've never seen a clearfix method that applies `clear: both` to `.clearfix.before`. – nalzok Oct 24 '16 at 17:37
  • 1
    @sunqingyao ah. Well I think Oriol has provided you with an explanation. – hungerstar Oct 24 '16 at 17:40

1 Answers1

2

Using clearance in a ::before pseudo-element is a bit weird because, while the contents of the element will be placed below the float due to clearance, the float will still overlap the element.

See what happens when you add a background:

.container {
  background: silver;
}
.float {
  float: left;
}
.clearfix {
  background: green;
}
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
<div class="container">
  <div class="float">
    outer-float
  </div>
  <div class="clearfix">
    <div class="float">
      inner-float
    </div>
    content
  </div>
</div>

Usually what one would want is either clearance on the element itself, or no clearance.

.container {
  background: silver;
}
.float {
  float: left;
}
.clearfix {
  background: green;
  clear: both;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
<div class="container">
  <div class="float">
    outer-float
  </div>
  <div class="clearfix">
    <div class="float">
      inner-float
    </div>
    content
  </div>
</div>

Anyways, note adding clearance to a ::before pseudo-element is not a clearfix. Clearfixes are hackish techniques used to force a block to grow vertically in order to encompass all its floated contents. That is, clearfixes are a way to emulate block formatting context roots. That's why the clearance should be used after the contents, in the ::after pseudo-element.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • I have an extra question: what about applying `clear: both` to the whole `.clearfix` element? Like this: `.clearfix {clear: both}`. It's found [here](http://learn.shayhowe.com/html-css/positioning-content/). – nalzok Oct 24 '16 at 17:40
  • @sunqingyao Yes, that will move `.clearfix` below preceding floats (if it's block-level). – Oriol Oct 24 '16 at 17:50