是否存在“浮流”？

Question

当我有一些简单的元素漂浮时，如本例所示：http ://jsfiddle.net/2zpqyLt0/

div {
  width: 100px;
  height: 100px;
}
.element1 {
  background: rgb(211, 206, 61);
  float: left;
}
.element2 {
  background: rgb(85, 66, 54);
  float: left;
}
.element3 {
  background: rgb(247, 120, 37);
  float: left;
}

<div class="element1"></div>
<div class="element2"></div>
<div class="element3"></div>

它们彼此相邻地堆叠在一起。据我了解，当您“浮动”一个元素时，它就脱离了文档的正常流程。文档正常流中（仍然）的元素不知道该元素存在，因此它们可以与其重叠。但是其他浮动元素呢？看起来他们彼此认识并且处于某种“浮动流”中，否则如果他们不认识，他们就会全部重叠并最终出现在左侧边缘。是否有一个术语来描述这种“浮动类型的流”，其中浮动元素由于某种原因知道它们存在？

Answer 1

文档正常流中（仍然）的元素不知道该元素存在，因此它们可以与其重叠。但是其他浮动元素呢？

此行为在可视化格式化模型文档中定义。

更具体地说，第 9.5 节和 9.5.1 节对此进行了讨论：

9 可视化格式化模型 - 9.5 浮点数

浮动是在当前行上向左或向右移动的框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可以沿其侧面流动（或通过“清除”属性禁止这样做）。内容沿着左浮动框的右侧向下流动，并沿着右浮动框的左侧向下流动。下面是浮动定位和内容流的介绍；“float”属性的描述中给出了控制浮动行为的确切规则。

浮动框向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动框的外边缘。如果存在行框，则浮动框的外顶部与当前行框的顶部对齐。

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就好像浮动不存在一样。但是，在浮动元素旁边创建的当前和后续行框会根据需要缩短，以便为浮动元素的边距框腾出空间。

换句话说，即使浮动元素不在文档流中，浮动元素仍将定位到其他浮动元素的外边缘。

请参阅第 9.5.1 节中管理浮动行为的确切规则。