css浮点数及其堆栈顺序 [英] css floats and its stack order

问题描述

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

示例1：

  .box-1 {背景：蓝绿色；宽度：100px;高度：100px; float：left;}  

 < div class = box box-1< / div< 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 ？

解决方案

我将添加更多解释，因为我认为已接受的答案省略了一些重要部分，但未提供真正的解释。让我们从

所以 p 是一个块元素，其行为与第二个示例中的 box-2 和浮动元素完全一样 box-1 在其上方。这证实了在两个示例中我们都有相同的东西，但是在第一个示例中，我们在块元素 p 和与绝对定位的元素内有文本，

现在，为什么浮动元素位于 p 标记上方，并且在 box-2 上方？

您可以在绘画顺序的规范。这两个元素都没有定位，但一个元素都浮动了：

4. 对于其所有流入的，未定位的，块级后代：按树
   的顺序：如果元素是块，列表项或其他等效于
   的块：




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

如我们所见，我们首先在步骤（4）中绘制流入元素（在您的情况下， code> p 标签和 box-2 ），然后在步骤中打印浮动内容（ 5）（ box-1 ）。

---

避免这样的事情，您有两种解决方案（如在其他答案中提供的那样）：

1. 您清除float是按顺序使用的常见解决方案避免元素受到浮动行为的影响。




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

I am reviewing the floats property which i learned before,I found a simple issue about floated elements with its own stacking order, the code as:

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

I totally understand the text will wrap around the the box which is right next to the box-1, but when there is no text elements only two div boxes:

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>

This time the .box-1 will overlap the .box-2 since it was floated and taken from the normal document flow.

So my questions are:

1. Since the p tag is a block element and it could be considered as a box. but why in the example 2 the p tag is moving to the right after the box-1? but in the example 1 there is totally different behavior?

2. It is because of the floated elements has same stack order like p tags and both of them have higher stacking order than the non-floated box as .box-2 here?

解决方案

I am going to add more explanation as I think the accepted answer omitted some important parts and didn't provide a real explanation. Let's start with the definition of float from the MDN documentation:

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

So yes float behave like absolute positioning but not exactly because element is still a part of the flow.

Now both of your examples behave exactly the same, the only difference is that in the first one you have text. So the float element doesn't push the p like you think but overlap it and push only the text. If you inspect the element you will see this:

So p is a block element and behave exactly like the box-2 in your second example and the floated element box-1 is above it. This confirms that in both examples we have the same thing but in the first one we have text inside the block element p and unlike absolute positioned element, floated element pushs text as described above.

Now why the floated element is above the p tag and above the box-2?

You can find this answer within the specificaton of the painting order. Both elements are not positioned and one is floated:

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

5. All non-positioned floating descendants, in tree order.

As we can see, we first draw the in-flow element in the step (4) (in your case the p tag and the box-2) then we print the floating ones in the step (5) (the box-1).

---

To avoid such things you have two solutions (like provided in other answers):

1. You clear float which is a common solution used in order to avoid element being affected by the floating behavior.

2. You make the box-2 an inline-block element because inline-block behave like inline-elements and they are also pushed by floated element

这篇关于css浮点数及其堆栈顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！