html - 为什么 float-right 元素没有一直到顶部？

Question

我知道会发生这种情况，但想澄清原因，因为我正试图更好地理解 float 机制

给定这个 HTML

<div class="wrapper">
  <div class="inner first">1</div>
  <div class="inner second">2</div>
  <div class="inner third">3</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;
}

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

第三个div并没有一直 float 到右上角，而是与第二个div对齐

我知道会发生这种情况，但我想更具体地解释为什么(基于什么规则)

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;
}

我希望这能让您现在更加清楚。如果下面没有评论，我可以用更多的例子来解释。