2.1.46 [CSS-Level2-2009] Section 9.5, Floats
V0066:
-
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.
Quirks Mode and IE7 Mode (All Versions)
Content before the float in tree order does not flow to the left side of a right-floated element. In addition, the content does not flow to the right side of a left-floated element. As a result, the float is moved to the next line.
V0067:
-
If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
Quirks Mode and IE7 Mode (All Versions)
Floats do not align with the current line box. Instead, they create a new line box on the next line.
V0068:
-
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, line boxes created next to the float are shortened to make room for the margin box of the float.
Quirks Mode and IE7 Mode (All Versions)
The following variations apply:
Block boxes are flowed around floats.
Floats are not placed on the same line box as previous inline content. Instead, they are placed on a new line.
V0069:
-
If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline-level boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
Quirks Mode and IE7 Mode (All Versions)
Floats are moved to a new line instead of interacting with the text of a previous line.
V0070:
-
Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. In other words, if inline-level boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
Quirks Mode and IE7 Mode (All Versions)
Floats are moved to a new line instead of interacting with previous line content.
V0071:
-
The contents of floats are stacked as if floats generated new stacking contexts, except that any positioned elements and elements that actually create new stacking contexts take part in the float's parent stacking context.
Quirks Mode and IE7 Mode (All Versions)
A positioned element that is the child of a floated element does not take part in the stacking context of the parent.
V0072:
-
A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.
Quirks Mode and IE7 Mode (All Versions)
Inline content paints below float content.