<br/>清除<div>中的<div>

时间:2009-03-26 17:23:48

标签: html xhtml

有什么区别

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

VS

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

...

另外,我想

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

是一种很好的清算方式,但是

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

正确的方式?

12 个答案:

答案 0 :(得分:28)

不同之处在于您继承的其他样式属性。当然,一个来自<br>,另一个来自<div>

通常 <div>除了display:block之外没有特殊的样式含义,而<br>表示换行符和一些非零高度(与当前相关联)字体高度)。

但经常(例如使用无处不在的css-reset技术)几乎没有区别。因此,选择最具有语义意义的那个。

[UPDATE]

要结束标记,请使用<div></div>而不是<div/>Here's why

感谢评论员Sebastian Celisephemient进行“结束标记”修正。

答案 1 :(得分:10)

这是我用于清算的风格:

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

用法:

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

当高度为零时,这不会占用页面中的任何额外空间。

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

答案 2 :(得分:2)

我会用:

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

我通常在clear元素之后使用float:left类,当使用<br>代替<p>时,它们似乎在IE7上运行不正常按照假设清楚,在Safari4 / Chrome上他们添加了不必要的空间。我没有时间更好地调查这个,所以我的设计可能只是一个错误,我知道在这种情况下<p>似乎更像是跨浏览器。

答案 3 :(得分:1)

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

这个链接说了更多,并建议: http://www.positioniseverything.net/easyclearing.html

答案 4 :(得分:1)

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

<br>实际上有点像块级元素,除了它受line-heightfont-size CSS属性的影响。

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

答案 5 :(得分:0)

如果您正在编写(有效)XHTML,则不需要使用结束标记,但自动关闭div标记在所有浏览器中都不起作用,因此您仍应使用它。即你的例子:

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

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

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

另外,对于值得推荐的<br>代码,我们不赞成使用<line>代码(请参阅w3.org entry on the <br/> tag

答案 6 :(得分:0)

这就是我经常使用的:

<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 :(得分:0)

您需要注意标记上的/。

我在&lt; script&gt;上的斜杠出现问题标签由&lt; script language =“javascript”src =“MyScripts.js”/&gt;终止办法。虽然,大多数符合xml标准的解析器都会同时接受这两种解析。

&LT;脚本&GT;必须由&lt; / script&gt;

终止

答案 8 :(得分:0)

.clear {clear:both; font-size:0px; line-height:0px;身高:0px;溢出:隐藏; }

用法

“br”有时会在Opera和IE浏览器中产生副作用,所以你应该避免使用它

答案 9 :(得分:0)

<br />是一个内联元素,其中<div>是一个块元素。无论如何,我个人更喜欢使用<hr class="clear">,我觉得它在语义上更合适。

答案 10 :(得分:0)

所有方法都不好。使用CSS更改页面的外观。 CSS有很多方法可以实现相同的功能。如给予“溢出:隐藏”;在父元素上。

答案 11 :(得分:0)

你也可以用..

<小时/> 通过添加CSS规则,它可以完成这项工作,并且可以实现此目的。