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