hr clear vs div clear。哪个更好？

Question

这是一个普遍的问题和一些让我意识到的东西，似乎有意义。我见过许多人使用清除div <div class="clear" />，并且知道这有时不赞成，因为它是额外的标记。我最近开始使用<hr class="clear" />，因为它代表了它的实际目的。

当然都是引用：.clear{clear:both;}

如果hr标记比清除内容div更有意义，我希望得到一些意见

Answer 1

更好的解决方案是不使用任何元素，并将overflow:hidden与IE的hasLayout触发器或clearfix一起使用。

Which clearfix method?

Answer 2

根据HTML5规范，hr元素表示段落级主题中断（故事中的场景更改，或者参考书中某个部分内的另一个主题的过渡），{{1元素是流内容的通用容器，它本身不代表任何东西。因此，我认为没有任何理由选择其中一个来容纳花车。

但是，你应该记住一些事情。阅读以下摘自Eric Meyer的文章Containing Floats：

div

     

  

     

负顶部和底部边距   具有闭合的一般效果   hr占据的空间。   但是，这种效果并不准确，   并不一定相同   浏览器。半神秘的本性   横向规则使其变得困难   准确预测会发生什么。   hr的有效高度可能   为零，或少量正数，   甚至是负高度

     

因此，在a   需要精确的清除效果，   作者可以使用div而不是hr   创造清算效果。

如果这对您没有意义，请参阅此fiddle并注意浮动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;} （IE8）下面的空格。

也就是说，还有其他方法可以包含浮动并避免同时使用结构黑客：

1. 浮动容器：可能会导致布局问题。
2. 使用div：如果内容超出容器的边界，您将看到滚动条。
3. 使用.container { overflow: auto; }：如果内容超出容器的边界，则会隐藏。
4. Clearfix：在2和3失败时使用。

Answer 3

这两种方法都是老式的。最新的“技巧”是将overflow属性用于float元素的容器。

例如，如果你有：

<div id="wrapper">
    <div class="float">text here</div>
    <div class="float">text here</div>
</div>

使用float类float:left，最好使用overflow:hidden或overflow:auto而不是<div style="clear:both"></div>或hr方法。

演示： http://jsfiddle.net/vALSL/

在此处阅读更多内容：http://www.quirksmode.org/css/clearing.html

Answer 4

我更喜欢仅CSS的方法。关于div和hr之间的语义，我不确定hr使用div比使用hr更有意义。 <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]--> 标记用于创建“段落级专题中断”。

http://dev.w3.org/html5/markup/hr.html

仅CSS解决方案：

http://www.positioniseverything.net/easyclearing.html

{{1}}