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

我相信我现在（在某种程度上）理解了这个问题。因为它们具有相同的尺寸，并且因为在保持文本空间的同时，它的float: left行为就像将的文本推到底部。display: absolutebox-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>