Best Practice for CSS Clear or Overflow [closed] - css

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
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:
Who is right? :)

Answer 1

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/

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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.