css浮动及其堆栈顺序

Question

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

示例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>

​

我完全理解文本将环绕框-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文件：中浮点的定义开始

float属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。元素将从网页的normal flow中删除，尽管仍然是流的一部分(与绝对定位相反)。

因此，是的，浮子的行为就像绝对定位，但并不完全是因为元素仍然是流的一部分。

现在，您的两个示例的行为完全相同，唯一的区别是，在第一个例子中，您有文本。因此，浮点元素不像您认为的那样推p，而是重叠它，，只推文本。如果您检查元素，您将看到以下内容：

​

​

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

现在为什么浮动元素位于p box-2**?**标记的标签之上，而在标记之上。

您可以在绘画顺序的具体内容中找到这个答案。这两个元素都没有定位，其中一个元素被浮动：

1. 对于的所有流内、非定位、块级后代，按树顺序排列:如果元素是块、列表项或其他等效块：
2. 所有未定位的浮子，按树顺序排列。

如我们所见，我们首先在步骤(4)中绘制 in -flow元素(在您的例子中是p标记和box-2)，然后在步骤(5) ( box-1)中打印浮动元素。

为了避免这种情况，您有两个解决方案(如在其他答案中提供的)：

1. 您可以清除浮点数，这是一种常用的解决方案，以避免元素受到浮动行为的影响。
2. 使box-2成为内联块元素，因为内联块的行为类似于内联元素，并且它们也是由浮动元素推送的。

Answer 2

我相信我现在(有点)理解了这个问题。因为它们具有相同的维度，而且由于float: left在维护文本空间时的行为类似于display: absolute，所以将box-2的文本推到了底部。

您可以绕过这个设置display: inline-block for 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

尝尝这个。只需在class类中添加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>

​