我正在回顾之前学过的浮动属性,我发现了一个关于浮动元素的简单问题,它有自己的堆叠顺序,代码如下： 例1： .box-1{ background: teal; width:100px;
... . . 我正在回顾之前学过的浮动属性,我发现了一个关于浮动元素的简单问题,它有自己的堆叠顺序,代码如下：
例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,因为它是浮动的并从正常文档流中获取.
所以我的问题是：
>由于p标记是块元素,因此可以将其视为一个框.但是为什么在示例2中p标签在box-1之后向右移动？但在例1中有完全不同的行为？
>这是因为浮动元素具有与p标签相同的堆栈顺序,并且它们都比非浮动框具有更高的堆叠顺序,如.box-2在这里？
解决方法
. 我将添加更多解释,因为我认为已接受的答案省略了一些重要部分,并没有提供真正的解释.让我们从 MDN documentation:的float定义开始
.
The float CSS property specifies that an element should be placed
along the left or right side of its container,allowing text and
inline elements to wrap around it. The element is removed from the
normal flow of the web page,though still remaining a part of the flow
(in contrast to absolute positioning).
所以是浮动表现得像绝对定位,但不完全是因为元素仍然是流程的一部分.
现在两个示例的行为完全相同,唯一的区别是在第一个示例中您有文本.所以float元素不会像你想象的那样推动p,而是重叠它并仅推送文本.如果你检查元素,你会看到：
所以p是一个块元素,其行为与第二个示例中的box-2完全相同,浮动元素box-1位于其上方.这证实了在两个示例中我们具有相同的东西,但是在第一个示例中,我们在块元素p内部具有文本,并且与绝对定位元素不同,浮动元素如上所述推送文本.
现在为什么浮动元素位于p标记之上且方框2之上？
你可以在the specificaton of the painting order内找到这个答案.两个元素都没有定位,一个是浮动的：
.
-
For all its in-flow,non-positioned,block-level descendants in tree
order: If the element is a block,list-item,or other block
equivalent: -
All non-positioned floating descendants,in tree order.
我们可以看到,我们首先在步骤(4)中绘制流入元素(在您的情况下是p标签和box-2)然后我们在步骤(5)中打印浮动元素(框-1) .
为了避免这种情况,你有两个解决方案(如其他答案中提供的)：
>您清除浮动,这是一种常用的解决方案,以避免元素受到浮动行为的影响.>你使box-2成为一个内联块元素,因为内联块的行为类似于内联元素,它们也被浮动元素推送
. . .. ...