3

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

braX
  • 11,506
  • 5
  • 20
  • 33
jeffreynolte
  • 3,749
  • 11
  • 41
  • 64
  • You could attach the clear class to the element that follows the HR element (the next sibling). That way, you would not need the HR at all. If there is no next sibling, just use `overflow:auto` on the parent to clear the floats. – Šime Vidas Mar 10 '11 at 22:30
  • possible duplicate of [Which clearfix method?](http://stackoverflow.com/questions/3227067/which-clearfix-method) – meder omuraliev Mar 10 '11 at 22:41

4 Answers4

3

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?

Community
  • 1
  • 1
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
3

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;}

That's not right Using a horizontal rule to force expansion

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.
melhosseiny
  • 9,992
  • 6
  • 31
  • 48
2

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

Sotiris
  • 38,986
  • 11
  • 53
  • 85
0

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]-->
Adam Ayres
  • 8,732
  • 1
  • 32
  • 25
  • Can you make it work: http://jsfiddle.net/simevidas/5Vnh9/ ? This is how it's supposed to look like: http://jsfiddle.net/simevidas/5Vnh9/2/ – Šime Vidas Mar 10 '11 at 22:45
  • Oh, in your use case all you really want is to put `clear:left;` on the second div that is not floated. The use case which warrants a clear-fix solution (either using additional markup or a CSS clearfix solution) is when there is a block level element where **ALL** of its children are floated and then the height of the container block level elements height is not calculated using the height of the floated children. I corrected your example and created a new one with floated children and the CSS clearfix: http://jsfiddle.net/magicaj/5Vnh9/3/ – Adam Ayres Mar 10 '11 at 22:55
  • So you apply the "clearfix" class to the parent element to make it wrap its children properly. Isn't `overflow:auto` on the parent the easier solution? – Šime Vidas Mar 10 '11 at 23:05
  • Using `overflow:auto` works as well, unless the element has padding/margin/boarder then you need to use `overflow:hidden`: http://joelpittet.com/log/2009/03/replacing-clearfix-with-overflowautohidden/ and http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/ are good reads. – Adam Ayres Mar 10 '11 at 23:13
  • I personally find the semantics of `
    ` preferable (and appropriate) over `
    `, but `overflow:auto` is by far the better choice. Inserting markup for styling is ugly.
     – Phrogz Mar 11 '11 at 00:51