HTML中的换行符

Question

什么被认为是“更好”的做法： <div class="clr"></div> （其中clr是clear:both），或者只是简单地：

<BR CLEAR:BOTH />

我很困惑，因为曾经有人告诉我永远不要使用BR，但是BR的设计就像div class一样吗？

问题：

当你想要清除时，只使用<BR />会有问题吗？或者我应该使用div？

提前致谢

编辑：我已经阅读了http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks和http://www.w3.org/TR/html4/struct/text.html#edef-BR

例子（请注意，我已经删除了类并直接将样式添加到HTML中以便阅读）：

<div style="float:left;">
    <a href="www.example.com"><img style="float:left;" src="/images/videos/video.jpg" width="90" height="75" alt="thumb" title="title" /></a>
    <a href="www.example.com" >Title text</a>
    <div style="clear:right;"></div>
    <span>Length: duration here</span>
    <div style="clear:right;"></div>
    <span>descriptive text here<span>
    <div style="clear:right;"></div>
    <span>Date: date of added here</span>
</div>

在您的专业意见中，我是否正确使用了span、div等标签？我应该使用BR标签来代替Div标签进行换行吗？

谢谢大家。

结束语：

感谢大家指出换行与清除浮动无关。我需要学习什么是换行...我猜我不知道。

感谢Freddy看到了我实际想要做的事情并给了我笨拙询问的解决方案。

- Dorjan

---

这段内容主要是关于在 HTML 中使用 <br> 和 <div> 标签来进行换行的比较，建议使用 <div> 标签并设置 clear:both 属性来达到更好的效果。 - madcolor

谢谢madcolor，所以使用div的方法是正确的！ - Dorjan

如果您想要清除先前浮动的元素，那么使用div是正确的方法。 如果您想要创建换行，则使用<br />是正确的标签。 - Steerpike

Answer 1

以上都不是最佳实践。最好的做法是使用HTML为信息提供结构。

因此，您可以使用div将信息部分放入页面中。如果需要在该信息后进行换行，则使用CSS进行样式设置。

---

<div id="someinformation">
   <p>some parragraph of info</p>
   <ul>
      <li>an item of the list</li>
      <li>another item</li>
      <li>yet another item</li>
   </ul>
</div>

现在在CSS中，您可以根据需要进行样式设置。文档本身具有结构化信息，并以某些默认方式由浏览器呈现。该结构与屏幕阅读器兼容，这些阅读器不会因HTML元素的视觉外观而受到干扰。

例如，如果您有更多的元素，在CSS中，您可以决定让它们并排出现，或者换行，或者留有一些边距。

- eglasius

---

抱歉，我不确定我理解你的意思。你能再解释一遍吗？ - Dorjan

发布了一条更新，希望它有所帮助。搜索语义化HTML和XHTML的相关内容。 - eglasius

嗯...我想要实现的是将图片放在左边，信息放在右边。根据您的示例，我可以将图片浮动到左侧，并设置一个 UL 列表放在右侧？这样就不需要额外的清除了吧？还是我理解错了？ - Dorjan

是的，我假设你在一个单独的.css文件中这样做。你也可以在<style>部分中进行操作。不建议将其嵌入文档内。在我的具体示例中，我可以将float：left; 应用于“＃someinformation p”，并将float：right应用于“＃someinformation ul”。为了使其正常工作，您需要为这些元素设置宽度（可能是％），以便它们使用您打算使用的空间，浏览器知道如何计算布局。 - eglasius

嘿弗雷迪！你的解决方案不仅看起来最好，而且感觉也是如此。我用一个UL替换了span和div，并重新设置了样式，猜猜怎么着，正是我需要的。非常感谢，我想当我列出清单时应该更多地使用列表。+1 - Dorjan

Answer 2

BR标签的语义作用是在短语中或两个单词之间添加换行符。它不清除浮动。

具有清除属性的元素会清除元素上面和下面的浮动，所以在这种情况下，从语义上讲最好使用div，因为你并不是创建一个换行符而是清除浮动。

可以指定BR标签具有清除属性，但从语义上来讲这样做就没有意义了。

如果想要在文本后面添加填充/间距/换行，最好使用margin/padding属性，而不是连续使用BR标签。

总之：

This is the first line<br />Second line

针对换行符的处理。

<div style="float: left">Clear me</div>
<div style="clear:left"></div>

标签的用法。

<div style="margin-bottom: 19px;">Test here</div>

对于“换行”或更准确地说是文字下方的边距。

至于你的演示文稿，似乎你可能需要更多地研究浮动。从语义上讲，所有东西都向左浮动，然后每一行都清除右侧，这有点混乱。优雅的编码就是尽量用最少的代码实现最大的效果。

- Dmitri Farkov

Answer 3

你给出的解决方案不是针对正确的问题。这些“clear”元素通常不是用来创建换行符的，而是用来清除在它们之前出现的浮动元素。

- Steerpike

---

那么换行和清除有何不同呢？我的理解是BR标签只是应用了“clear:both”的样式。 - Dorjan

<br/>会插入一个换行符，与清除浮动无关。 - knittl

@Dorjan：BR也会创建换行，而DIV从技术上讲不会。 - Dmitri Farkov

问题在于他的问题标题与他显示的解决方案相冲突。如果您想要创建一个换行符，那么应该使用 <br />；如果您想要清除浮动（这是他的示例所做的），那么应该使用 div 或者更好的其他清除方案。 - Steerpike

Answer 4

我从不会使用

标签来实现这个功能。我认为在<p>标签内需要换行时，最好的方法是使用<br/>标签。 无论如何，我不确定你为什么要使用CLEAR:BOTH或class=clr。

- Santi

---

我认为你在stackoverflow上把示例代码放在了代码标签之外，因此我看不到它们。 - Dorjan

Answer 5

你可以考虑给元素添加clear-properties，而不是在其中插入另一个（无意义的）元素。

HTML 应该描述结构，而不是呈现。如果你添加 BR - 换行符 - 来改变呈现方式（样式化后网站的外观），那么你做错了什么。

添加 DIV 或 SPAN 对结构没有影响，因为它们根本没有语义含义。

- Arve Systad

---

当您将清除应用于元素时，它会在其之前清除，而不是在其之后，对吗？这就是我对所有这些额外元素的感觉，它感觉浪费，我只是不知道其他的方法... - Dorjan

@Arve 我同意你的总体论点，但我不会说 DIV 是毫无价值的。它存在的目的是为了在文档中标记一段信息。将其仅用于引起视觉行为是错误的，但将其用于充分分组文档中的信息并不是错误的。 - eglasius

给span添加clear似乎没有任何作用...我猜它们不接受它？ - Dorjan

@Freddy：我并不是说Divs毫无价值 - 它们非常重要！只是它们没有像P、TABLE或其他结构元素那样的适当语义意义。@Dorjan：使用浮动然后清除您的Spans应该可以解决问题。当然，将它们放入列表中也可以。 - Arve Systad

@Arve 同意，我认为我们有着相似的想法，即必须使用所有元素来充分地结构化文档，并附加语义。TABLE 是经典的误用情况... 还有一些元素没有语义或结构含义。我不明白为什么会有人对你的答案投反对票 - 对答案和后续行动点赞。 - eglasius