Question

我知道会发生这种情况，但我想澄清为什么，因为我试图更好地了解浮动机制

鉴于此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不会一直浮到右上角，而是与第二个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;
}

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

Answer 2

那是因为float rules说

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

由于.first右侧空间不足，.second位于下方。但是，.third无法置于.second之上，即使它适合.first留下的可用空间。

Answer 3

这是因为页面流顺序。浮动元素时，您没有从页面的流顺序中完全删除它，而是指定它应将自身定位到元素的左侧或右侧。通过将div三向右浮动，你就不会像完全放置div一样将它从流中移除。

在您的示例中，div和2的净宽度比父包装器宽。这意味着他们不能内联，所以他们堆叠。将三个位置划分在它前面的元素的右边（div二），但仍然受到流量顺序的影响并且位于div 1之下。

为什么浮右元素不会一直走到顶端？

3 个答案: