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 盒子的时候：

Example 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）高吗？

- JianNCI

---

你想要做什么？请简短说明。很难理解你的问题。你想为 box-2 填充蓝色背景吗？ - Saravana

你好，这段代码示例是为了测试目的而编写的。我在底部列出了我的问题，我想知道为什么box-2没有像p标签一样向右移动到box-1旁边？因为p标签也是块级元素。 - JianNCI

这是一个非常有趣的案例。这明显是由于width和height设置引起的。不确定原因，但您可以通过将box-2设置为display: inline-block来解决此问题。如果您从box-1中删除背景，您会注意到box-2的背景实际上位于其后面。 - A. L

Answer 1

我会添加更多解释，因为我认为被接受的答案省略了一些重要部分并没有提供真正的解释。让我们从MDN文档中的float定义开始：（链接）

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

所以，是的，float的行为类似于绝对定位，但不完全一样，因为元素仍然是流程的一部分。

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

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

现在为什么浮动元素在p标记和box-2上方？

您可以在绘制顺序规范中找到答案。两个元素都没有定位，其中一个被浮动：

4. 对于树形顺序中所有其流程中的非定位块级后代：如果该元素是块级、列表项或其他块等效项：

5. 所有非定位的浮动后代，按树形顺序。

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

---

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

1. 清除浮动是一种常见的解决方案，用于避免元素受到浮动行为的影响。

2. 将box-2设置为内联块元素，因为内联块元素的行为类似于内联元素，并且它们也会被浮动元素推动。

- Temani Afif

Answer 2

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

您可以通过为 box-2 设置 display: inline-block 来解决此问题，有趣的是，设置 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>

- A. L

---

抱歉，我不应该将文本“box-1”和“box-2”添加到两个div标签中，以免引起误解。 - JianNCI

我只是在想，当将浮动的box-1向左移动时，为什么p标签文本可以紧贴其旁边，而box-2却重叠了。但根据您的建议：在box-2上添加"display:inline-block"就可以解决问题。 - JianNCI

@JianNCI 这是由于强制使用了width height属性，如果从box-2中删除它们，它将像普通的p标签一样显示。 - A. L

Answer 3

试试这个。只需在你的CSS中为.box类添加overflow:hidden。

.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>

- Saravana