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:

1. Float the container: may cause layout problems.
2. Use .container { overflow: auto; }: If the content exceeds the boundaries of the container, you will see a scrollbar.
3. Use .container { overflow: hidden; }: If the content exceeds the boundaries of the container, it will be hidden.
4. Clearfix: To be used when 2 and 3 fail.