CSS 浮点逻辑答案

【问题标题】：CSS Float LogicCSS 浮点逻辑
【发布时间】：2015-08-31 17:57:45
【问题描述】：

我已经创建了 25 个随机宽度和高度的框，其中width == height（如图所示）

$(document).ready(function(e) {
  for (var count = 0; count < 5; count++) {
    for (var iter = 0; iter < 5; iter++) {
      $(".content").append("<div id='" + count + "_" + iter + "' class='box'><p>" + count + "_" + iter + "</p></div>");
      $(".content div:last").width(Math.round((Math.random() * 100) + 50));
      $(".content div:last").height($(".content div:last").width());
    }
  }
});

.box {
  background: #FF0004;
  margin: 10px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="content">
  </div>
</body>

我试图更好地理解浮动属性逻辑以及浮动元素相互“堆叠”时定位背后的原因。例如（取自小提琴的截图）：

是什么让3_3在屏幕变大后重新定位到下图的位置？

根据 W3Schools：

如果您将多个浮动元素一个接一个地放置，如果有房间，它们将彼此相邻浮动。

所以问题是，“room”是什么意思，控制浮动元素位置的逻辑是什么？

这个 SO 帖子的答案：CSS Float explanation 似乎是相关的，但它似乎并不能解释为什么浮动元素会停在某个位置。

【问题讨论】：

标签： html css css-float

【解决方案1】：

这是与您的问题最相关的链接答案部分：

当您浮动一个块元素时，您是在告诉浏览器将其放置在前一个浮动对象旁边，只要容器足够宽（否则它将下降到前一个对象下方）。

正如作者所说，这是一种粗略的简化。规范的Section 9.5.1 列出了所有精确规则，但我不会在这里引用整个内容，因为它是一个非常长的阅读内容，并且这里只有某些点是相关的。当我逐步详细介绍您的小提琴中发生的事情时，我将引用相关要点。

比较您的两个屏幕截图。注意位置发生变化的两个盒子 3_2 和 3_3，以及它们周围的盒子 2_4、3_0 和 3_1。

之前

之后

当屏幕变大时，你腾出空间让 3_2 从原来的位置移动到 2_4 旁边，向上移动到 3_1 旁边：

左浮动框的左侧有另一个左浮动框，其右外边缘可能不在其包含块右边缘的右侧。（粗略地说：左浮动可能不会在右边缘突出，除非它已经尽可能地向左。）类似的规则适用于右浮动元素。

浮动框必须放置在尽可能高的位置。

左浮动框必须尽可能放在左边，右浮动框尽可能放在右边。较高的位置比更靠左/更靠右的位置更受欢迎。

这反过来又为下一个浮动框腾出空间，使其尽可能地占据顶部和左侧的空间，遵循与上述相同的规则。结果，3_3 向上浮动，在 3_2 附近停止，然后它沿着水平轴尽可能向左浮动，在 2_4 附近停止。请注意，即使 3_3 看起来应该能够适应 2_4 和 3_2 之间的距离，但实际上并非如此，因为必须尊重边距（这就是上面“外边缘”的含义）。

此时，除了上面的#8 和#9 项之外，以下项适用：

如果当前框是左浮动的，并且源文档中存在由较早元素生成的任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须在右侧前一个盒子的右外边缘，或者它的顶部必须低于前一个盒子的底部。类似的规则也适用于右浮动框。

浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。

由于 3_3 太大，它会从第一行浮动框产生明显的向下突出。这有效地增加了第一行的高度。 3_3 之后的所有其他浮动元素必须保持在自己的行上，并且第二行浮动不能与 3_3 的下边距边缘相交。这主要受第 5 项约束。

【讨论】：

我只是想感谢你这个答案（迟来的），我一直在参考它，它真的是一个了不起的答案！