2

On a layout I'm working on (and in most cases otherwise), I can't think of any instances where I wouldn't want a div to not contain its floated children. So I'm thinking instead of adding a clearfix class to every element that needs it (mostly container divs), why not just make all divs already clearfixed like so:

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

Are there any disadvantages to this? I can't really see any while testing my current layout, but maybe some more knowledgeable people out there know better than I.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
ccnokes
  • 6,885
  • 5
  • 47
  • 54
  • Similar to [this](http://stackoverflow.com/questions/6272787/best-clearfix-ever), though I'm not sure how useful my answer actually is... – thirtydot Nov 08 '12 at 23:33

2 Answers2

3

If you do this, then you will never be able to have multiple floated divs stack horizontally with one another, because your clearfixes are getting in the way.

So in a way, having a clearfix on every div element would nullify the effect of floating them, as well as related elements.

This is why articles often suggest applying clearfix to a certain class, then giving the desired elements that class instead:

.cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Good point there, I hadn't thought of that -- I have two different container classes I'm using for full-width, vertically stacked divs; so it'd be better to just incorporate the clearfix CSS into one of those classes or just add the cf class to those divs. Always better to stay flexible. – ccnokes Nov 08 '12 at 23:43
2

In my opinion the clear fix is superfluous for most cases where it is used, it is far simpler just to use overflow: hidden.

Obviously if the element has dimensions set smaller than it's content, or you actually want the ability for a child element to sit outside it's parent, then this wont work. But eight times out of ten I find that overflow hidden wont cause any problems what-so-ever, and is much cleaner to implement.

With regards to setting the clear fix on every div, I would stay well away from this.

  1. It would add quite a bit of extra processing to your page rendering.
  2. It would be near-invisible to others working with your code.
  3. Not to mention BoltClock's float problem.

I have however built layouts that have made copious use of overflow hidden with no ill effects.

  1. It isn't a hack, it utilises in-built element rendering options.
  2. If applied to each class that needs it, it is quite obvious to other developers.
  3. It wont suffer the float problem.
Pebbl
  • 34,937
  • 6
  • 62
  • 64
  • 1
    I would add that `overflow: auto;` works the same way and could be more suitable than `hidden` in some specific cases – Luca Nov 09 '12 at 00:15
  • @Luca +1 good point, it works just as well.. however I prefer my elements to be clipped rather than to have scroll bars appear if there is a layout issue. Makes perfect sense though for floated regions that might need to scroll though. – Pebbl Nov 09 '12 at 09:49
  • Good point pebbl, I was actually just playing with that today. For my purposes overflow:hidden is the way to go but as Luca said there are instances where auto is preferred. Thanks! – ccnokes Nov 09 '12 at 22:26