CSS浮动与边框崩溃

Question

我是CSS的新手，当我从MDN网站https://developer.mozilla.org/en-US/docs/Web/CSS/float了解float的行为时遇到了问题。我在上述网站上尝试了CodePen示例，并注释了CSS文件中的第17行。我得到的结果是，蓝色框似乎神奇地消失了。我的猜测是边境倒塌有问题。谁能指出我的正确方向，并解释那里发生了什么？

Answer 1

1. 如果您未为框3设置float，它将回到左侧。
2. 您无法看到它，因为方框1包含float: left并将其覆盖。 尝试使方框1透明，使方框3出现。 （请参阅下面的代码段）
3. 第3格的内容将被推到下一行，因为第1格已被占用 最左边的位置。

纠正我的任何错误。谢谢。

section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.left {
  float: left;
  background: pink;
}

.right {
  /* float: right; */
  background: cyan;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/float -->
<section>
  <div class="left" style="opacity:0;">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi tristique sapien ac erat tincidunt, sit amet dignissim
    lectus vulputate. Donec id iaculis velit. Aliquam vel
    malesuada erat. Praesent non magna ac massa aliquet tincidunt
    vel in massa. Phasellus feugiat est vel leo finibus congue.
  </p>
</section>

Answer 2

这是因为方框3现在位于方框1的后面。

float的意思是，元素之后的所有内容都将沿相反的方向缠绕，并且其流程将被重置，即，从从DOM中删除float元素时，它应从应放置的位置开始。

>

例如

如您所见，段落的实际位置从初始位置1开始。

如果具有相同宽度和高度的块元素而不是段落，会发生什么？

完全正确！它会出现在框1的后面。为什么3小于1？因为右边没有空间。如果我们增加方框3的宽度，那么它将相应地包裹在左侧。

那么您的情况将会怎样？

是的，第3格将排在第1格之后，其他所有内容都将相应地布置。