小时清除vs清除。哪个更好？ [英] hr clear vs div clear. Which is better?

问题描述

这是一个普遍的问题，对我来说，似乎有意义的东西。我已经看到很多人使用清除divs < div class =clear/> ，知道这有时被皱眉了，因为它是额外的标记。我最近开始使用< hr class =clear/> 作为它的实际目的的代表。

当然引用： .clear {clear：both;}

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

解决方案

根据HTML5规范， hr 一个段落级的专题断点（一个故事中的一个场景变化，或者一个参考书段落中另一个主题的过渡），而 div 元素是一个通用容器流内容本身不代表任何东西。所以我没有看到任何理由选择一个包含浮动。另一个包含浮动。

但是，有一些你应该记住。阅读以下摘自Eric Meyer的文章并注意到浮动的 div （IE8）下面的空格。

也就是说，并避免同时使用结构化黑客：

1. 浮动容器：可能导致布局问题。


2. 使用 .container {overflow：auto;如果内容超出容器的边界，您将看到一个滚动条。


3. 使用 .container {overflow：hidden; } ：如果内容超出容器的边界，则会被隐藏。


4. Clearfix ：在2和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

解决方案

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.

这篇关于小时清除vs清除。哪个更好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！