为什么右浮动元素没有一直到顶部？

Answer 1

好问题，我看到有些人很难理解这一点。根据您的问题，我觉得您想将“3”与框中的右上角对齐。你的内部是500 * 500，你的第一个和第二个是300 * 300，因为它不能容纳总共600，所以第二个将低于第一个。然后有一个 200 的空间用于第三个。它将占用接下来的 200 个空间（第二个空间旁边），并且上面的空间未使用。为了获得所需的输出，您需要如下所示向上移动 3，以便首先利用右上角的 200 空间。

也许这可以帮助你：

  <div class="wrapper">
  <div class="inner third alg">3</div>
  <div class="inner first">1</div>
  <div class="inner second ">2</div>
  </div>

CSS代码：

.wrapper {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  border: 1px solid black;
}

.inner {
  border: 1px solid black;
  box-sizing: border-box;
}

.first, .second {
  float: left;
  width: 300px;
  height: 300px;
}

.alg{
  text-align: right;
}

.third {
  width: 200px;
  height: 200px;
  float: right;
}

我希望现在您能更清楚地了解事情。如果没有在下面评论，我可以用更多例子来解释。

Answer 2

那是因为浮动规则说

5. 浮动框的 outer top 不得高于源文档中较早的元素生成的任何 block 或 floated 框的外顶部。

由于

.first

右侧空间不足，所以将

.second

放置在下方。但是，

.third

不能放置在

.second

上方，即使它适合

.first

留下的可用空间。

Answer 3

这是因为页面流顺序。当您浮动一个元素时，您并不是将其完全从页面的流动顺序中删除，而是指定它应该将自己定位在元素的左侧或右侧。通过将 div 3 向右浮动，您不会像绝对定位 div 那样将其完全从流程中删除。

在您的示例中，div 一和二的净宽度比父包装器宽。这意味着它们不能在线休息，因此它们会堆叠。 div 位于其前面的元素（div 2）右侧的三个位置，但仍受流顺序的影响，位于 div 1 下方。

Answer 4

如果你不想在 HTML 中将 div #3 放置在 #1 和 #2 之上，最好使用 CSS flexbox 来实现所需的布局。