Question

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

示例1：

＆＃13;

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

＆＃13;

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

＆＃13;

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

示例2：

＆＃13;

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

＆＃13;

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

＆＃13;

这次.box-1将与.box-2重叠，因为它已经浮动并从普通文档流中获取。

所以我的问题是：

Answer 1

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

的float定义开始

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

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

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

因此p是一个块元素，其行为与第二个示例中的box-2完全相同，浮动元素box-1位于其上方。这证实了在两个示例中我们都有相同的内容，但在第一个示例中，我们在块元素p内部有文本，而与绝对定位元素不同，浮动元素按上述方式推送文本。 / p>

为什么浮动元素位于p标记之上且位于box-2之上？

您可以在the specificaton of the painting order内找到此答案。两个元素都没有定位，一个元素浮动：

对于树中的所有流入，非定位，块级后代   order：如果元素是块，列表项或其他块   当量：



所有未定位的浮动后代，按树顺序排列。

正如我们所看到的，我们首先在步骤（4）中绘制 in-flow元素（在您的情况下是p标记和box-2）然后我们在步骤（5）中打印浮动（box-1）。

为避免此类事情，您有两种解决方案（如其他答案中提供的那样）：

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

试试这个。只需在{c}中为overflow:hidden类添加.box。

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

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