具体是做什么的？

Question

谁能解释一下 页面的作用是什么？结果出人意料。我在最新版本的Chrome和Firefox上测试了代码，两个浏览器上的结果是相同的。所以对此必须有一些解释。我不想做一个明确的修复。我只是好奇这是怎么发生的。

 与一起使用position:absolute;：

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

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

 与一起使用float:left;：

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

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

Answer 1

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

浮动定位和绝对定位之间的行为差异在于，浮动通常不会彼此相交（除非您使用负边距强制它们相交），而绝对定位的元素可以相交，因为它们不知道彼此（并且浮动元素也不知道）。其余布局）。

但请注意，position: absolute它本身不会改变元素的静态位置（即，如果它没有被排除，它本来会在哪里）。请参阅以下问题：

这就是为什么会br影响第二个绝对定位元素的布局。如果隐藏第一个元素，则更清楚的是，br刚刚从文档的第一行开始，不知道第一个元素，但第二个元素知道br：

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

.box:first-child {
  visibility: hidden;
}

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

至于浮动，CSS2.1规范规定浮动元素不能高于包含前一个元素的盒子的行盒子。我猜测会br生成一个内联框，该框位于新行框中，而不是位于上一行的末尾（正如您所期望的回车符一样），这就是第二个浮动元素从第二行开始的原因文档的第一行而不是第一行。

&lt;br/&gt;具体是做什么的？