hr clear vs div clear. Which is better? - html

Question

This is a general question and something that dawned on me and seemed to make sense. I have seen many people use clearing divs <div class="clear" />and know this is sometimes frowned upon as it is extra markup. I recently started using <hr class="clear" /> as it seams representative of its actual purpose.
Both referencing of course: .clear{clear:both;}
I am looking to get some opinions if an hr tag makes more sense than a div to clear content

Answer 1

According to the HTML5 spec, the hr element represents a paragraph-level thematic break (a scene change in a story, or a transition to another topic within a section of a reference book) while the div element is a generic container for flow content that by itself does not represent anything. So I don't see any justification for choosing one over the other for containing floats.
However, there's something you should keep in mind. Read the following excerpt from Eric Meyer's article Containing Floats:
div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}
div.item hr {display: block; clear: left; margin: -0.66em 0;
visibility: hidden;}
The negative top and bottom margins
have the general effect of closing up
the space that the hr occupies.
However, this effect is not precise,
and not necessarily identical across
browsers. The semi-mysterious nature
of horizontal rules makes it difficult
to predict exactly what will happen.
The effective height of the hr might
be zero, or a small positive amount,
or even a negative height
Therefore, in situations where a
precise clearing effect is needed,
authors can use a div instead of an hr
to create a clearing effect.
If this didn't make sense to you, see this fiddle and notice the space below the floated div (IE8).
That said, there are other ways to contain floats and avoid using structural hacks at the same time:
Float the container: may cause layout problems.
Use .container { overflow: auto; }: If the content exceeds the boundaries of the container, you will see a scrollbar.
Use .container { overflow: hidden; }: If the content exceeds the boundaries of the container, it will be hidden.
Clearfix: To be used when 2 and 3 fail.

Answer 2

The better solution is to not use any elements and use overflow:hidden with a hasLayout trigger for IE, or the clearfix.
Which clearfix method?

Answer 3

Both methods are old fashioned. The latest "trick" is to use overflow property for the container of float elements.
If for example you have:
<div id="wrapper">
<div class="float">text here</div>
<div class="float">text here</div>
</div>
with float class float:left then it's better to use overflow:hidden or overflow:auto than <div style="clear:both"></div> or the hr method.
Demo: http://jsfiddle.net/vALSL/
Read more here: http://www.quirksmode.org/css/clearing.html

Answer 4

I prefer the CSS only approach. Regarding the semantics between div and hr I am not sure I think hr makes any more sense to use than a div. The hr tag is meant to create a "paragraph-level thematic break".
http://dev.w3.org/html5/markup/hr.html
CSS only solution:
http://www.positioniseverything.net/easyclearing.html
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style><!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
display: block; /* resets display for IE/Win */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->