Are there any disadvantages to adding clearfix to all divs?

Question

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.

Answer 1

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;
}

Answer 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.