HTML 中的换行符答案

【问题标题】：Line Breaks in HTMLHTML 中的换行符
【发布时间】：2009-09-22 12:04:07
【问题描述】：

什么被认为是“更好”的做法：

<div class="clr"></div>（其中 clr 明确：两者）或者只是简单地说：

<BR CLEAR:BOTH />

我真的很困惑，因为我曾经被告知永远不要使用 BR，但是 BR 被设计为 div 类是什么？

问题：

当你想清除时只使用<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 而不是 Divs 来休息吗？

谢谢大家

结束语：

感谢大家指出换行符与清除浮动无关。我需要确切地了解换行符是什么......我想我不知道。

感谢弗雷迪看到我真正想做的事情并为我提供了我笨拙地要求的解决方案。

【问题讨论】：

stackoverflow.com/questions/686766/br-vs-div-in-clearing
感谢 madcolor，所以 div 的方法是对的！
如果您想清除以前浮动的元素，那么 div 方法是正确的。如果您尝试创建换行符，那么
是执行此操作的正确标签

标签： html

【解决方案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 中你可以决定让它们并排出现，或者带有换行符，或者带有一些边距。

【讨论】：

对不起，我不确定我是否理解你。你能再解释一下吗？
发布了更新，希望对您有所帮助。搜索语义 HTML 和 XHTML。
嗯...我想要实现的是左侧的图像和右侧的信息。在您的示例中，我可以将图像浮动到左侧，并设置将向右下方的 UL？也不需要额外的清除吗？还是我失控了？
是的，我假设您在单独的 .css 文件中执行此操作。您也可以在
嘿弗雷迪！您的解决方案不仅看起来最好，而且感觉也很好。我用 UL 替换了 span 和 div 并重新设置了样式，然后猜猜是什么，正是我需要的。非常感谢，我想我在列出东西时应该更多地使用列表。 +1

【解决方案2】：

您为自己提供的解决方案提出了错误的问题。那些 'clear' 元素通常不是用来创建换行符的，它们是用来清除出现在它们之前的浮动元素。

【讨论】：

所以换行符与清除方式不同？我以为 BR 所做的只是应用 Clear:both 样式？
<br/> 将插入一个与清除浮动无关的换行符
@Dorjan：BR 也会创建换行符，而 DIV 在技术上不会。
问题是他的问题标题与他显示的解决方案冲突。如果您尝试创建换行符，那么您应该使用
如果您尝试清除浮动（这是他的示例正在做的事情），那么您应该使用 div 或最好使用其他解决方案之一进行清除

【解决方案3】：

BR 在语义上用于在短语中间或两个单词之间等位置添加换行符。它不会清除浮动。

具有 clear 属性的元素会清除元素上方指定的任何一侧的浮点数，这里使用 div 在语义上更有意义 - 因为您不是创建换行符而是清除浮点数。

可以将 BR 指定为具有清晰但语义上的再一次，这将缺乏意义。

要在某个文本之后添加填充/中断/边距，最好使用边距/填充属性，而不是连续使用 BR。

总之：

This is the first line<br />Second line

送给兄弟的。

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

对于 div 的。

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

用于文本下方的“换行符”或更准确的边距。

至于您的演示文稿，您似乎需要更多地研究花车。从语义上讲，一切都向左浮动，然后你清除每一行的事实有点混乱。优雅的编码是关于最少的代码 - 最大的结果。

【讨论】：

【解决方案4】：

向您的 span 元素添加 clear-properties 怎么样，而不是在其中插入另一个（无意义的）元素？

HTML 应该描述结构，而不是表示。如果您添加 BR - 换行符 - 以更改演示文稿（网站在设置样式时的外观），那么您做错了。

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

【讨论】：

当您向元素添加 clear 时，它会在其自身之前清除，对吗？不是之后？这就是我对所有这些额外元素的感受，感觉很浪费我只是不知道另一种方式......
@Arve 我同意你所说的整体论点，但我不会说 DIV 毫无价值。它的存在是为了标记文档中的一部分信息。仅仅为了引起视觉行为而使用它是错误的，但使用它来对文档中的信息进行充分分组并没有错。
向 spans 添加 clear 似乎无济于事......我猜他们不接受它？
@Freddy：我并不是说 Div 毫无价值——它们真的很重要！它们只是没有像 P、TABLE 或其他结构元素那样的适当语义含义。 @Dorjan：浮动然后用你的跨度清除应该可以解决它。当然，或者将它们放在一个列表中。
@Arve 同意，我认为我们有类似的想法，基本上所有元素都应该用于充分构造具有相关语义的文档，TABLE 是误用的经典案例......并且有一些元素没有语义或结构意义。我不明白为什么有人会对你的答案投反对票 - +1 表示答案并跟进。

【解决方案5】：

我永远不会为此使用 div。例如，当您需要在 <p> 内换行时，我相信 <br/> 是最好的选择。无论如何，我不确定你为什么要使用 CLEAR:BOTH 或 class=clr。

【讨论】：

我认为您将示例代码留在了 stackoverflow 的代码标签之外，因为我看不到它们