html - hr 清除 vs div 清除。哪个更好？

Question

这是一个普遍的问题，也是我突然想到并且似乎有道理的问题。我看到很多人使用清除div <div class="clear" />并且知道这有时不受欢迎，因为它是额外的标记。我最近开始使用 <hr class="clear" />因为它接缝代表了它的实际用途。

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

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

Answer 1

根据 HTML5 规范，hr 元素表示段落级别的主题中断(故事中的场景切换，或引用书某一节中到另一个主题的过渡)，而div 元素是流内容的通用容器，它本身不代表任何内容。因此，我看不出有任何理由选择其中一个来包含 float 。

但是，有一点您应该牢记。阅读 Eric Meyer 的文章 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.

如果这对您没有意义，请参阅 fiddle并注意 float div (IE8) 下面的空间。

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

1. float 容器:可能会导致布局问题。
2. 使用 .container { overflow: auto; :如果内容超出了容器的边界，你会看到一个滚动条。
3. 使用 .container { overflow: hidden; :如果内容超出容器的边界，就会被隐藏。
4. Clearfix : 当 2 和 3 失败时使用。