8

Having a discussion with a co-worker on what is best practice with CSS clear / overflow. Please shut one of us up and explain why one is better than the other.

JOEL'S CODE (using overflow):

<style>
  .container { overflow: hidden; }
  .one, .two { float: left; width: 50px; height: 50px; background-color: red; }
</style>

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>

CHRIS' CODE (using clear):

<style>
  .clear { clear: both; }
  .one, .two { float: left; width: 50px; height: 50px; background-color: red; }
</style>

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
   <div class="clear"></div>
</div>

Both make this image:

Properly positioned elements

Who is right? :)

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Joel
  • 225
  • 2
  • 3
  • 8
  • http://www.impressivewebs.com/overflow-hidden-problem/ – Cody Gray - on strike Dec 19 '11 at 16:15
  • 4
    possible duplicate of [Floated Child Elements: overflow:hidden or clear:both?](http://stackoverflow.com/questions/2648205/floated-child-elements-overflowhidden-or-clearboth) – Cody Gray - on strike Dec 19 '11 at 16:16
  • 3
    Both work, but the latter requires an extra element in your html. Since html is for content, and css for presentation, I kind of doesn't make sense to require an extra element to make the layout work. What if it's not possible for you to change the html? The former would be the most preferable way of doing it by a long shot. PS I also add a `zoom:1` to make it work in IE6, but maybe I should start letting this go. – Gerben Dec 19 '11 at 16:23

6 Answers6

6

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox.

http://css-tricks.com/all-about-floats/

Phil Klein
  • 7,344
  • 3
  • 30
  • 33
2

overflow:hidden is best used when you have a container which is smaller than the content inside; whereas clear:both is best used when you want a floating container to NOT position itself alongside the nearest container.

looking at your red squres example, you would want to use clear rather than overflow, but not as its done here. perhaps something more like:

.container { width:110px; clear:both; }
.one, .two { float: left; width: 50px; height: 50px; margin-right:10px; background-color: red; }

basically you are both wrong and right. Joel uses the better html approach, but Chris is using the right bit of CSS code, just in the wrong way.

Jimmery
  • 9,783
  • 25
  • 83
  • 157
1

Here is a compromise:

DEMO jsBin

CSS:

  .container { display:table; }
  .one, .two { float: left; width: 50px; height: 50px; background-color: red; margin:1px;}

HTML:

<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>
<div class="container">
   <div class="one"></div>
   <div class="two"></div>
</div>

I'd write it this way. CHRIS's code is something i'd not write but just cause of the redundant empty DIVs.

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • There's nothing around to clear the last container's floated children though. How does this answer the question anyway? – BoltClock Dec 19 '11 at 16:21
  • Dear friend @Bolt, If there's nothing to clear, than you are missing the `.one, .two {float:left` property. This answers the question that both are right but that's the way I'd write it. So now they can add my answer the the question! ;) I'll add the explanation to my answer. – Roko C. Buljan Dec 19 '11 at 16:24
  • 2
    I think you misread my comment - I'm saying that the last two floated children aren't being cleared. – BoltClock Dec 19 '11 at 16:26
  • @BoltClock is saying if you add in an element after the final container, it doesn't display below the container, but instead next to it. – JxM Dec 19 '11 at 16:28
  • True guys. I missed the `display: table ;` for the `.container`. Thanks! (fast fingers - surfin' brain) – Roko C. Buljan Dec 19 '11 at 16:35
0

Since the CSS in both cases is about the same in terms of complexity and maintainability, the solution with simpler (and hence, smaller) HTML and overall payload wins. It isn't a big difference, and with compression, the repeated code will likely disappear, but simpler and smaller is always better if all else is equal.

cdeszaq
  • 30,869
  • 25
  • 117
  • 173
0

What about the micro clearfix? No added markup, no overflow: hidden; clipping, cross browser support for IE 6+.

JxM
  • 514
  • 2
  • 5
0

My personal preference is the overflow:hidden technique. I think this is because floating something is a style decision. To place a class of clear in the markup seems to me like adding style information into the data layer. It's similar (but nowhere near as bad) as adding inline css. (Infact, if you think about it, you might as well add style="clear:both" to the div you wish to add class="clear" to).

This is of course my personal opinion. I don't claim one is better than the other. But I have very rarely encountered a problem with overflow:hidden.

punkrockbuddyholly
  • 9,675
  • 7
  • 36
  • 69