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

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

此行为在visual formatting model documentation。

中定义

更具体地说，第9.5和9.5.1节讨论了这个问题：

9 Visual formatting model - 9.5 Floats

浮动是一个在当前行上向左或向右移动的框。浮动（或“浮动”或“浮动”框）最有趣的特征是内容可能沿其侧面流动（或禁止通过'clear'属性这样做）。内容沿左浮动框的右侧向下流动，沿右浮动框的左侧向下流动。以下是浮动定位和内容流程的介绍;精确的rules控制浮动行为在'float'属性的描述中给出。

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

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

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

请参阅section 9.5.1中有关浮动行为的确切规则。

Answer 2

我不是内幕专家，但这对我来说似乎并不太令人惊讶。

毕竟，文本和其他内容已经在浮动元素周围流动。因此，如果你有第二个浮动元素，它似乎也很自然地围绕第一个浮动元素。

恰巧这会导致多个元素并排浮动。

有“浮动流”吗？

2 个答案: