0

It seems that the community here agrees that the old "clearfix" hack has now been depreciated and superseded by overflow:hidden. Unfortunately there are situations where even using this method causes problems. (For example: This would look like this if it worked correctly.)

The main problem with using the old fashioned <div class="clear"> seems to be that it creates a div element for sole purpose of altering the presentation -- which seems to be muddying the ideal of pure semantic markup with presentation.

Other than that, though, it appears to work well with all browsers and in all situations (which cannot be said for "clearfix" or overflow:hidden).

Are there any other drawbacks to using clear:both? Is it really that bad to use? Or is it just personal preference?

Community
  • 1
  • 1
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
  • `overflow:hidden` (or `overflow:auto` or `overflow:scroll`) was _supposed_ to be _the_ way to wrap one's contents. – John Dvorak Feb 28 '13 at 22:33
  • 2
    Personally, I'm against `overflow:hidden;`, when you use it, you'll have to say byebye to `absolute` divs inside the div; specially notifications, message boxes, hints, stuff like that, you're forced to put them all inside. – Ali Bassam Feb 28 '13 at 22:50
  • I would look more closely before following the community in using `overflow: hidden`. It is fine in some situations and problematic in others. See @clairesuzy's answer to the question you referenced (http://stackoverflow.com/a/5566031/101869) and then also have a look at the conversation at "Which method of 'clearfix' is best?" (http://stackoverflow.com/q/211383/101869). In my answer I outline why I think `display: inline-block` is the most robust solution (http://stackoverflow.com/a/9932508/101869). – Chris Calo Mar 01 '13 at 20:36

3 Answers3

1

It's fine. Not as nice as a pure CSS method, no, but there are times when overflow:hidden / auto just won't work well (for example, when you want an absolutely positioned element to 'pop' out of its container).

Yes, it adds a maintainability cost, and yes, it's theoretically suboptimal for SEO, but it's hardly a cardinal sin.

Jimmy Breck-McKye
  • 2,923
  • 1
  • 22
  • 32
1

There are side effects

clear: both has a side effect that if there are any other floats present in the same block formatting context, the clear: both element will be forced below them. Sometimes this is what you want. Sometimes it isn't. This jsbin demonstrates a case where it will eat your lunch:

Example of when <code>clear: both</code> causes problems.

The trick is in controlling which floats a cleared element should interact with. You do this with block formatting contexts, an insulated rectangle inside of which all floats and cleared elements interact. Floats and cleared elements outside of a block formatting context cannot interact with floats or cleared elements inside.

This is one important drawback to keep in mind when using clear: both. Is it really that bad to use? No. You just have to be aware of how floats and clears interact and how to prevent them from doing so when you need to. In many situations these issues don't come up, so choosing a method for clearing floats can be a matter of personal preference. But some situations demand a deeper consideration of how floating and clearing works. Every clearing method has side effects, so you have to pick the right one for your situation. There are detailed answers at Which method of 'clearfix' is best?

Community
  • 1
  • 1
Chris Calo
  • 7,518
  • 7
  • 48
  • 64
  • When building complex apps, you're often nesting layouts inside of other layouts. For this case, assume there are other floats inside of the main grey area that you are trying to clear. What will end up happening is that the first `clear:both` and everything that follows will be pushed down below the sidebar. – Chris Calo Mar 04 '13 at 20:11
  • Have another look, @DjangoReinhardt. Let me know if this makes the situation I'm describing more clear. – Chris Calo Mar 05 '13 at 03:43
  • Thanks, I took another look. If you clear all your floats, there's no issue: http://jsbin.com/eladob/6/ – Chuck Le Butt Mar 05 '13 at 16:36
  • @DjangoReinhardt, the reason that works is you floated the main content section, which makes it a new block formatting context, not because you cleared all of the floats. The problem with this approach is that you can't have the main section fill the remaining horizontal space (you set a fixed width). Without the fixed width your layout breaks. You may not prefer this style, but this demonstrates why `clear: both` can have unintended side effects. – Chris Calo Mar 05 '13 at 17:39
  • Cool, gotcha. I can't imagine many sites filling the whole width of the screen with content, and even less that use floats in the same you've suggested, but I'm sure there's some that legitimately do that! Thanks! – Chuck Le Butt Mar 05 '13 at 18:34
  • Are these the only side-effects you know of? And are they unique to clear:both (i.e. would using overflow:hidden or "clearfix" work ok in this situation?). – Chuck Le Butt Mar 05 '13 at 18:35
  • Every solution has side effects. The trick is choosing the right ones for your situation. `overflow: hidden` has the side effect of clipping content that falls outside the bounds of the element. Traditional clearfix solutions are very similar to `clear: both` and will have the same side effects. I outlined that I think is the most robust method for insulating and containing floats in my answer to "Which method of 'clearfix' is best?" http://stackoverflow.com/a/9932508/101869 – Chris Calo Mar 06 '13 at 18:49
  • ? `"Clearfix"` has its own set of issues that `clear: both` doesn't have. It would be great if you could answer the questions I asked you. Thanks! – Chuck Le Butt Mar 07 '13 at 10:16
  • If you want detailed answers to follow-up questions, I suggest posting a new question. – Chris Calo Mar 07 '13 at 13:00
  • I asked two questions: They're both "yes" or "no". And I'm asking because they result in whether I accept your answer or not (more the second one than the first). – Chuck Le Butt Mar 07 '13 at 15:37
0

clear:both simply means that there are no floats allowed to the left or right. An alternate method does exist, but it isn't safe for older browsers.

.element:after { content:""; clear:both; }

I'm pretty sure clear: is standard, floats are just tricky if you do not fully understand them (it took me a while).

The reason the white space exists is that floated elements do not actually 'exist', in the sense that they give no definitive dimensions for the container to wrap around. You can use clear:left clear:right or clear:both on an item after the float and it will create a hard line, the same as using the <div class="clear"></div> method.

Personally, I use the tried-and-true hack and add pseudo elements for when it's (hopefully) supported all around.

Casey Dwayne
  • 2,142
  • 1
  • 17
  • 32