<br/> vs <div/> 清场答案

【问题标题】：<br/> vs <div/> in clearing<br/> vs <div/> 清场
【发布时间】：2010-10-15 18:21:54
【问题描述】：

有什么区别

<br style="clear:both;"/>

对

<div style="clear:both;"/>

??

我也觉得

<div style="clear:both;"/>

是一种很好的清零方式，但是

<div style="clear:both;"> </div>

正确的方法？

【问题讨论】：

对不起，如果您已经知道这一点，但在某些情况下您不需要更清晰的。如果您只是希望父元素拉伸以包含完整的浮动元素，您只需在父元素上设置溢出值，它将自动拉伸。我更喜欢这个，因为你不需要标记
@Helephant：你能详细说明一下使用溢出吗？我从未使用过或听说过它。
看看这个页面：quirksmode.org/css/clearing.html
@Helephant：谢谢！这是一个非常好的技巧，假设该技巧与文章中提到的所有浏览器兼容。
我可以在 IE6、IE7 和 Firefox 中保证它。我很确定它也适用于 Safari 和 Opera。

标签： html xhtml

【解决方案1】：

区别在于您继承了哪些其他样式属性。当然一个继承自<br>，另一个继承自<div>。

通常 <div> 除了display:block 之外没有特殊的样式含义，而<br> 意味着换行和一些非零高度（链接到当前字体高度）。

但通常（例如，使用无处不在的css-reset 技术）几乎没有区别。因此，请选择最语义意义的一个。

[更新]

对于结束标签，使用<div></div> 而不是<div/>。 Here's why.

感谢评论者Sebastian Celis 和ephemient 对“结束标签”的更正。

【讨论】：

结束标签有所不同。我不建议使用自闭合 div 标签。见dusan.fora.si/blog/self-closing-tags
comment++ 除非您使用的是 XHTML/XML，否则
很有可能不是您认为的意思。
我知道
行不通……只是在我需要的时候找不到页面！
不起作用的真正解释是因为他正在发送 text/html Content-Type 标头。他正在使用伪 XHTML

【解决方案2】：

这是我用于清除的样式：

.Clear { clear: both; height: 0; overflow: hidden; }

用法：

<div class="Clear"></div>

由于高度为零，因此不会占用页面中的任何额外空间。

Internet Explorer 有一个奇怪的想法，即每个元素的内容必须至少有一个字符高，另一个奇怪的想法是每个元素都应该与其内容一样高。使用overflow: hidden 可以防止内容影响元素的大小。

【讨论】：

为什么投反对票？如果你不发表评论解释原因，那就没用了。
这是旧的。我想补充一点，我使用了类似的东西，只有我包括 line-height:0;margin:0;padding:0; 并且我也可以将 font-size 设置为 0（以影响行高）。我也保持名称小写。我添加了所有额外的内容，以便它可以跨浏览器（和版本）工作。
@vol7ron: 你的版本不是跨浏览器，因为font-size:0 在 IE7 上不工作！
@MarcoDemaio：哇老帖子。它应该工作。我怀疑我没有突出显示 0 因为我没有添加单位。有些人在像素中工作，我喜欢在 em 中工作。所以试试0em 或0px - 它肯定可以在 IE7 中工作
@vol7ron：使用不带单位的零值可以正常工作，并在标准中指定。但是，当您拥有overflow: hidden; 时，设置line-height、font-size 或padding 是没有实际意义的。

【解决方案3】：

我会使用：

<p class="clear"></p>

在你的 CSS 中添加：

.clear {clear:both; height:0px; font-size:1px;}
/* font-size:0px; does not work well on IE7, it works in IE8 and all other browsers. */

你可能会说，为什么不呢：

<br class="clear">

我通常在float:left 元素之后使用clear 类，当使用<br> 而不是<p> 时，它们似乎在 IE7 上无法正常工作，它们并没有像预期的那样清晰，并且Safari4/Chrome 他们添加了不需要的空间。我没有时间更好地研究这个，所以这可能只是我的设计上的一个错误，我所知道的 <p> 在这种情况下似乎更适合跨浏览器。

【讨论】：

【解决方案4】：

嗯，没有区别，取决于继承的样式。

此链接说明了更多内容，并建议： http://www.positioniseverything.net/easyclearing.html

【讨论】：

【解决方案5】：

在这里我能想到的唯一区别是<div> 是块级元素，而<br> 是内联级元素。

但<br> 实际上的行为有点像块级元素，除了它受line-height 和font-size CSS 属性影响。

在我看来，<br style="clear:both;"/> 是在您的页面中放置换行符的更合适的方式，主要是因为它被广泛接受并且可能不熟悉您的标记的其他人很容易识别。

【讨论】：

【解决方案6】：

这是我经常使用的：

<style type="text/css">
.clearing {
height: 0;
line-height: 0;
font-size: 0;
clear: both;
overflow:hidden;
}
</style>

我需要清理的地方：

<div class="clearing"></div>

您可能也对自清集装箱感兴趣：http://www.positioniseverything.net/easyclearing.html

编辑：根据另一个答案海报的建议添加了“溢出：隐藏”。

【讨论】：

也许有人更喜欢他们的答案，并投票给我，只是因为它的见鬼。哦，好吧...

【解决方案7】：

您确实需要小心标签上的 /。

终止

【讨论】：

【解决方案8】：

.clear { 清除：两者；字体大小：0px；行高：0px；高度：0px；溢出：隐藏； }

用法

“br”在Opera和IE浏览器中有时会产生副作用，请避免使用

【讨论】：

【解决方案9】：

如果您正在编写（有效的）XHTML，则不需要使用结束标记，但自闭 div 标记并非在所有浏览器中都有效，因此您仍应使用它。即你的例子：

`<div style="clear:both;"> </div>`

这是有效的 XHTML（请参阅 html vs xhtml），但不适用于所有浏览器，因此您应该坚持使用上述内容：

~~<div style="clear:both;" />~~

此外，<br> 标记已被弃用，取而代之的是 <line> 标记（请参阅w3.org entry on the <br/> tag）

【讨论】：

不，我相信你最初是正确的。虽然从技术上讲，规范说 div 可以自动关闭，但有些浏览器不喜欢它。 dusan.fora.si/blog/self-closing-tags
嗯...那我应该改回来吗？另外，这是一个关于我们是否应该使用 xhtml 的有趣线程：webmasterworld.com/forum21/12026.htm
由于一些浏览器供应商拒绝完全支持 XHTML，整个情况并不理想。我通常建议只有在 XHTML 中总是自封闭的标签是自封闭的（img、br、input 等）。其他一切都应该正常关闭。
我不明白我们为什么要降级:(

【解决方案10】：

所有方法都不好。使用 CSS 更改页面的外观。有许多方法可以用 CSS 完成相同的任务。如给出“溢出：隐藏；”在父元素上。

【讨论】：

【解决方案11】：

<br /> 是一个内联元素，而<div> 是一个块元素。反正我个人比较喜欢用<hr class="clear">，感觉语义上比较合适。

【讨论】：

【解决方案12】：

你也可以使用..

通过添加 CSS 规则，它可以完成这项工作，并且达到了这个目的。

【讨论】：

我认为您的答案已嵌入网站中。我猜你建议使用 hr 标签:)