Question

我创建了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>

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

enter image description here

当屏幕变大时，是什么让3_3重新定位到如下所示的位置？ enter image description here

据W3Schools说：

如果您将多个浮动元素放在一起，如果有房间，它们将相互浮动。

所以问题是，“房间”意味着什么，以及控制浮动元素位置的逻辑是什么？

此SO帖子的答案：CSS Float explanation似乎相关，但它似乎无法解释为什么浮动元素在某个位置停止。

Answer 1

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

当你浮动一个块元素时，你告诉浏览器将它放在前一个浮动对象的旁边，只要容器足够宽（否则它将落在前一个对象下面）。

正如作者所说，这是一个粗略的简化。规范的Section 9.5.1有一个包含所有精确规则的列表，但我不会在这里引用整个内容，因为它是非常长读取，这里只有某些点相关。当我逐步了解你的小提琴中发生的事情时，我会引用相关的观点。

比较两个截图。注意两个已经改变位置的方框，3_2和3_3，以及它们周围的方框，2_4,3_0和3_1。

<强>之前

Before

<强>后

After

当屏幕变大时，您可以腾出空间让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项管理。

CSS Float Logic

1 个答案: