Is there a “float flow”?

When I have some simple elements floated like in this example: 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>

They are stacked next to each other. As far as I understand, when you “float” an element, it’s out of the document’s normal flow. Elements that are (still) in the document normal flow don’t know this element exists, so they can overlap with it. But what about OTHER floated elements? It seems they know each other and are in some sort of “floated flow”, else if they didn’t, they’d all overlap and end up at the left edge. Is there a term for this “float type of flow” where floated elements, for some reason know that they exist?


solution

Elements that are (still) in the document normal flow don’t know this element exists, so they can overlap with it. But what about OTHER floated elements?

This behavior is defined in the visual formatting model documentation.

More specifically, sections 9.5 and 9.5.1 discuss this:

9 Visual formatting model - 9.5 Floats

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description: “Is there a float flow?” property.

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

In other words, even though a float is not in the document flow, floating element(s) will still be positioned to the outer edge of other floating element.

See the exact rules governing the float behavior in section 9.5.1.