hr clear vs div clear. Which is better?

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

and

相关标签:

Answer 1

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]-->

Answer 2

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.

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

Answer 4

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