我创建了 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>我试图更好地理解浮动属性逻辑以及浮动元素彼此“堆叠”时定位背后的推理。例如（从小提琴中截取的屏幕截图）：
What makes 3_3 relocate to the position as shown below when the screen is made bigger?
根据 W3Schools 的说法：
如果你一个接一个地放置几个浮动元素，如果有的话，它们会并排浮动。room.
所以问题是，什么是“room“ 是什么意思以及控制浮动元素位置的逻辑是什么？
这篇SO帖子的答案：CSS 浮动解释 https://stackoverflow.com/questions/7964806/css-float-explanation似乎相关，但它似乎无法解释为什么浮动元素停止在某个位置。
以下是链接答案中与您的问题最相关的部分：
当您浮动块元素时，您是在告诉浏览器将其放置在前一个浮动对象旁边，只要容器足够宽（否则它将下降到前一个对象下方）。
正如作者提到的，这是一个粗略的简化。第9.5.1节 http://www.w3.org/TR/CSS21/visuren.html#float-position该规范列出了所有精确规则，但我不会在这里引用整个内容，因为它是very阅读很长，只有某些要点与这里相关。当我逐步了解您的小提琴中发生的情况时，我将引用相关观点。
比较您的两个屏幕截图。注意位置已改变的两个框 3_2 和 3_3，以及它们周围的框 2_4、3_0 和 3_1。
Before
After
当屏幕变大时，您可以为 3_2 留出空间，使其从 2_4 旁边的原始位置向上移动到 3_1 旁边：
- 如果左浮动框的左侧有另一个左浮动框，则其右外边缘可能不会位于其包含块右边缘的右侧。 （宽松地：左浮动可能不会在右边缘伸出，除非它已经尽可能远离左侧。）类似的规则适用于右浮动元素。
- 浮动箱必须放置得尽可能高。
- 左浮动框必须尽可能放置在左侧，右浮动框必须尽可能放置在右侧。较高的位置优于较左/右的位置。
这反过来又为下一个浮动框留出空间，以尽可能占据顶部和左侧的空间，遵循与上面相同的规则。结果，3_3 浮起来，停在接近 3_2 的地方，then它沿水平轴尽可能向左浮动，在接近 2_4 时停止。请注意，尽管 3_3 看起来应该能够容纳在 2_4 和 3_2 之间，但事实并非如此，因为必须考虑边距（这就是上面“外边缘”的含义）。
此时，以下各项适用，此外上面的#8 和#9 项：
- 如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，当前框的左外边缘必须位于右外边缘的右侧前一个盒子的外边缘，或者其顶部必须低于前一个盒子的底部。类似的规则也适用于右浮动框。
- 浮动框的外顶部不得高于源文档中较早的元素生成的任何块或浮动框的外顶部。
由于 3_3 太大，它会从第一行浮动框产生明显的向下突出。这有效地增加了第一行的高度。 3_3 之后的所有其他浮动元素必须保留在自己的行上，并且第二行浮动元素不得与 3_3 的底部边距边缘相交。这主要由第 5 条规定。