2.1.47 [CSS-Level2-2009] Section 9.5, Floats

V0066:

The specification states:

 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:

The specification states:

 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:

The specification states:

 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:

The specification states:

 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:

The specification states:

 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 specification states:

 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:

The specification states:

 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.

Show: