Question

任何人都可以解释<br />对页面的影响吗？结果出人意料。我在最新版本的Chrome和Firefox上测试了代码，结果在两个浏览器上都是一样的。所以必须有一些解释。我不是想做一个clearfix。我很好奇它是如何发生的。

<br/>与position:absolute;一起使用：

＆＃13;

.box{
  position: absolute;
  padding:1em;
  border:1px solid black;
}

＆＃13;

<div class="box"></div>
<br/>
<div class="box"></div>

＆＃13;

<br/>与float:left;一起使用：

＆＃13;

.box{
  float:left;
  padding:1em;
  border:1px solid black;
}

＆＃13;

<div class="box"></div>
<br/>
<div class="box"></div>

＆＃13;

Answer 1

如上所述，br元素引入了换行符。这个元素在CSS中的实现方式在不同的浏览器中差别很大，但是当你处理两个块级框时，我并不感到惊讶，这里的行为是一致的。

浮动和绝对定位之间的行为差异是浮动通常不会相互交叉（除非你使用负边距强制它们），而绝对定位的元素可以交叉，因为它们不会彼此意识到（布局的其余部分也没有。）

但请注意position: absolute本身并不会改变元素的静态位置（即如果它没有被放置则会改变它的位置）。请参阅以下问题：

这就是br影响第二个绝对定位元素布局的原因。如果你隐藏了第一个元素，那么br只是从文档的第一行开始，不知道第一个元素，但是第二个元素知道{{1}的，这一点变得更加清晰。 } ：

＆＃13;

br

＆＃13;

.box {
  position: absolute;
  border: 1px solid black;
  padding: 1em;
}

.box:first-child {
  visibility: hidden;
}

＆＃13;

至于浮点数，CSS2.1规范说floating elements cannot be higher than the line box containing the box of a preceding element。我猜测<div class="box"></div> <br> <div class="box"></div>生成一个内联框，它位于一个新的行框中，而不是在前一行的末尾（正如您所期望的回车），这就是为什么第二个浮动元素从文档的第二行开始，而不是从第一行开始。

Answer 2

<br>（<br/>在XHTML中）是换行符。它类似于ASCII字符CR（回车）。它是一个内联元素，这意味着它被设计为在div中的文本内部使用，并作为跨度等的一部分。

在您的代码中，由于br类似于添加CR，因此效果与在第二个块上方添加一行文字代替br相同。

我在这里这样做了：

.box{
  position: absolute;
  padding:1em;
  border:1px solid black;
}

<div class="box"></div>
abc
<div class="box"></div>

在上面，位置是绝对的，因此div s彼此叠加。添加br导致第二行向下移动一行。

下面，文本被添加到第二个块上方，但块不会叠加，并向左浮动。

.box{
  float:left;
  padding:1em;
  border:1px solid black;
}

<div class="box"></div>
abc
<div class="box"></div>

参考：Mozilla Developer Network: <br> Element

参考文献2：Learn CSS Positioning in Ten Steps

Answer 3

我想我知道发生了什么事。因为两个div都是类盒子，所以它们都是浮动的，但是因为你打破了第一个和第二个之间的界限，所以在第二个盒子之前应用了中断，因此它被向下推了一行。

<br />旨在用于分隔文字。如果你想移动div的位置，CSS样式肯定是要走的路。

Answer 4

意外结果不是由<br />和position:absolute造成的float:left造成的。

position:absolute就像将图像添加到word文档中一样，并选择“在文本前显示”，这是导致第一个示例中的两个div交叉进入的原因彼此。

float:left：我可以解释一下，因为这些项目的引力现在将它们拉到左侧，因此<br />使另一个div稍微低一点但彼此相邻。

我对第一个结果感到有些惊讶，但我预计两个div将完全匹配，而<br />没有任何影响。

Answer 5

<br>标记可以与回车相关。考虑到这一点的另一种方式是它是<div>，除了它没有任何内容。

Css也可用于保存文本格式。使用white-space：pre;保持内容的格式，如空格和行尾。

可以帮助您的链接：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
http://www.w3schools.com/tags/tag_br.asp

更新：我忽略了您的其他问题。意外的结果对你对css'position：'值所做的事情以及它们如何影响<br>更负责。请记住：<br>标记并不完全是换行符，因此它仍受其他css属性的影响。甚至可以将css应用于<br>，但如果您这样做，我建议您只需在父级上使用white-space:pre css代码，或使用<span>来实现此目的

Answer 6

<br />代码相当于HTML5中的<br>。基本上，这意味着在那一点上突破并进入新的界限。例如：

<p> hello world<br><br> how are</p>

输出是：

你好世界

怎么样

在hello world之后它会跳转到下一行，然后由于另一个break语句再次跳转到另一行。

在html中，一些元素是块元素，这意味着它们在完成像div之后会自动分成新行，完成后它们控制h1跳转到新行但是一些元素是内联元素< / strong>没有能力像p，span这样跳进新线。因此br用于打破html中的行。

什么确切地做什么？

6 个答案: