我正在回顾之前学习过的浮动属性,发现了有关具有其自身堆叠顺序的浮动元素的一个简单问题,代码如下:
示例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
,因为它已被浮动并从正常文档流中移除。所以我的问题是:
既然
p
标签是块级元素,可以被视为一个框。但为什么在示例2中,p
标签在box-1
后面向右移动?而在示例1中,行为完全不同?这是因为浮动元素具有与
p
标签相同的堆栈顺序,并且它们两者的层叠顺序都比非浮动框(例如这里的.box-2
)高吗?
box-2
填充蓝色背景吗? - Saravanawidth
和height
设置引起的。不确定原因,但您可以通过将box-2
设置为display: inline-block
来解决此问题。如果您从box-1
中删除背景,您会注意到box-2
的背景实际上位于其后面。 - A. L