1

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:

enter image description here

(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?

Community
  • 1
  • 1
Baumr
  • 6,124
  • 14
  • 37
  • 63
  • 1
    Don't need it? Don't do it. – DanMan Jan 06 '13 at 23:53
  • Nice one-liner, but good programming is about employing best-pratcies to predict and offset any future problems. The question is — does this qualify? (Being more or less a hack.) – Baumr Jan 07 '13 at 19:52
  • sorta related: even smaller clearfix when you drop ie6 http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php – albert Jan 07 '13 at 20:43
  • @albert, also would need to drop IE7. – Baumr Jan 07 '13 at 22:06

2 Answers2

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.

Marius Balčytis
  • 2,601
  • 20
  • 22
  • Thanks for the reply, seems like sound logic. So you're saying every container element that has a float inside should have either clearfix declared? Or does it also extend to every container that doesn't have a float inside it, but may one day? – Baumr Jan 07 '13 at 20:11
  • 1
    No, just with floats inside. Well, unless you have a class "container" which you apply to all containers, whether they have floats inside or not. Then you could just add clearfix css rules to that class. – Marius Balčytis Jan 08 '13 at 07:38
2

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

Community
  • 1
  • 1
Chris Calo
  • 7,518
  • 7
  • 48
  • 64
  • Thanks for your reply, but my question is not the same as the one you linked to. – Baumr Jan 07 '13 at 19:56
  • I see your concern for the micro-clearfix, but you don't mention anything about `overflow: hidden`. – Baumr Jan 07 '13 at 20:08
  • 1
    I was referring to the question you referenced in the "best ways to implement clearfix" link. Added detail to this answer about why `overflow: hidden` is a problem. – Chris Calo Jan 07 '13 at 20:45
  • I see, that covers it, thanks. But what about my original question of using any clearfix-esque solution such as yours, or `overflow: auto` when it's not (yet) needed in that situation? – Baumr Jan 07 '13 at 22:05
  • 1
    With an understanding the side effects of each solution, you can choose the one that best fits your situation. Traditional clearfix solutions are susceptible to interactions between floated elements outside the of the "clearfixed" element and `clear: left|right|both` elements inside. `overflow: hidden` elements may clip descendant content, and I think the issue with `overflow: auto` is that it may show scrollbars in situations where descendant content won't fit. It all depends on which side effects you're okay with. – Chris Calo Jan 08 '13 at 00:36
  • I see. But what I mean with this whole question is that one cannot be sure if they'll need any clearfix solution in the future. Therefore, the question is whether to preemptively use something, or not? Now, when it comes to using something preemptively: whether your method, or the others — there's a bit of a dilemma because it's hard to predict the future and if floating elements interacting will be a problem, scrollbars, hidden content, etc. — so which, due to the lack of a better word, is the best practice here? (Would be cool if you could update your question with an answer to this.) – Baumr Jan 08 '13 at 14:18
  • 1
    Check out the first paragraph of the answer. Just added that yesterday. In essence, I'm of the opinion that you should code CSS defensively in order to protect against future changes that you or someone else might make. – Chris Calo Jan 08 '13 at 14:39
  • Thanks, I hadn't seen that. I agree — coding defensively is a nice way of putting it. But I still don't see a clearcut answer on the best way to achieve that when it comes to floats, containers and clearfix solutions? – Baumr Jan 08 '13 at 15:00
  • For the best clearfix methods, I can only point you to the extensive answers at http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/1633170. Of course, I think my answer (http://stackoverflow.com/a/9932508/101869) gives the most robust and defensive solution. – Chris Calo Jan 08 '13 at 15:09