css浮动及其堆栈顺序

Question

我正在回顾之前学过的浮动属性，我发现了一个关于浮动元素的简单问题，它有自己的堆叠顺序，代码如下：

例1：

.box-1{
  background: teal;
  width:100px; height:100px;
  float: left;
}

<div class="box box-1"></div>
<p> this is the text for the testing purpose<p>
    
    

我完全理解文本将包装在box-1旁边的框中，但是当没有文本元素时，只有两个div框：

例2：

.box {
  width:100px;
  height:100px;
}

.box-1{
  background:teal; 
  float:left;
}
.box-2{
  background:blue;
}

<div class="box box-1"></div>
<div class="box box-2"></div>

这次.box-1将重叠.box-2，因为它浮动并取自正常的文件流。

所以我的问题是：

1. 由于p标签是一个块元素，它可以被视为一个盒子。但为什么在示例2中p标签在box-1之后向右移动？但在例1中有完全不同的行为？
2. 这是因为浮动元素具有相同的堆栈顺序，如p标签，并且它们都比非浮动框具有更高的堆叠顺序，如.box-2在这里？

Answer 1

我将添加更多解释，因为我认为已接受的答案省略了一些重要部分，并没有提供真正的解释。让我们从MDN documentation:的float定义开始

float CSS属性指定元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流中移除，但仍然是流的一部分（与绝对定位相反）。

所以是浮动表现得像绝对定位，但不完全是因为元素仍然是流程的一部分。

现在两个示例的行为完全相同，唯一的区别是在第一个示例中您有文本。所以float元素不会像你想的那样推动p，而是重叠它并仅推送文本。如果你检查元素，你会看到：

因此，p是一个块元素，其行为与第二个示例中的box-2完全相同，浮动元素box-1位于其上方。这证实了在两个示例中我们都有相同的东西，但在第一个中我们在块元素p中有文本，并且与绝对定位元素不同，浮动元素如上所述推送文本。

现在为什么浮动元素高于p标签并高于box-2？

你可以在the specificaton of the painting order找到这个答案。两个元素都没有定位，一个是浮动的：

4. 对于树中顺序的所有流入，非定位，块级后代：如果元素是块，列表项或其他等效块：
5. 所有未定位的浮动后代，按树顺序排列。

我们可以看到，我们首先在步骤（4）中绘制流入元素（在您的情况下是p标签和box-2）然后我们在步骤（5）（box-1）中打印浮动元素。

---

为了避免这种情况，你有两个解决方案（如其他答案中提供的）：

1. 清除float是一种常用的解决方案，以避免元素受到浮动行为的影响。
2. 你使box-2成为一个内联块元素，因为内联块的行为类似于内联元素，它们也被浮动元素推动

Answer 2

我相信我现在（有点）理解这个问题。因为它们具有相同的尺寸，并且因为float: left在保持文本空间的同时类似于display: absolute，所以它将box-2的文本推到了底部。

你可以绕过这个设置display: inline-block为box-2和有趣的是，把overflow: hidden或overflow: auto也修复它。

.box {
  width:100px;
  height:100px;
}

.box-1{
  float:left;
}
.box-2{
  background:blue;
  overflow: auto
}

<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>

Answer 3

试试这个。只需在qssxswpoi类的css中添加overflow:hidden即可。

.box

.box {
  width:100px;
  height:100px;
  overflow:hidden;
}

.box-1{
  background:teal; 
  float:left;
}
.box-2{
  background:blue;
}