Using clearfix when there's nothing to fix?

Question

It is clear to me (pun intended) that the two best ways to implement clearfix is either through Nicolas Gallager's micro-version .cf { *zoom: 1; }, or using overflow: hidden.

But should either clearfix be used when there's nothing to fix? (Pun intended, again.)

In other words, if you have a container like article or section simply for semantic reasons — which doesn't have a background or any visual effect (like is sought after in this example), but has floated elements inside — should you still clearfix it?

Why do I ask?

Well, clearly something is wrong because if you bring up the container in a web inspector you won't see the container highlighted, for example it is only an invisible slither:

(And in Firefox Tilt, which visualizes websites in 3D, there is an empty space where the container block should be when you turn the website 90-degrees.)

But does it matter?

My reasoning so far:

Surely, if you decided to use the container for visual/layout purposes in the future, you'd see that it's not behaving properly, and you'd apply a clearfix hack then. But, what else is there to consider?

Answer 1

It sounds like in your situation a problem hasn't reared its ugly head, but I prefer to code defensively. What if you later try to add a border or background to the element containing the floats? It won't look right. Or what if you later make a change to the floats such that they don't consume the full available width? Then inline content that follows might sneak up to either side of the floats. In my opinion, you're trying to protect against future changes.

There are two problems you are trying to prevent when using clearfix:

1. Containing descendant floats. This means that the element in question makes itself tall enough to wrap all floating descendants. (They don't hang outside.)
2. Insulating descendants from outside floats. This means that descendants inside of an element should be able to use clear: both and have it not interact with floats outside the element.

It's important to use clearfix anytime an element contains floated descendants and you want to accomplish these two goals. I do this for all elements that contain floats. Read more in my answer to the same question.

(As you can probably tell from that post, I strongly disagree that "the two best ways to implement clearfix is either through Nicolas Gallager's micro-version .cf { *zoom: 1; }, or using overflow: hidden." I don't have a problem with zoom: 1, but overflow: hidden will clip anything that falls outside the bounds of the element.)

Answer 2

I think you should always use clearfix. If you don't, many problems can arise, like floating content in some element after this div, problems with page boundaries (margins, padding etc). It's simpler to always use it than to search for and find the problem when it's not used, as not in all cases this can be so obvious what's wrong.