Export (0) Print
Expand All
Expand Minimize
This topic has not yet been rated - Rate this topic

2.1.41 [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.

All Document Modes (All Versions)

An absolutely positioned element generates an in-flow anonymous inline element if it is the last child of an inline element.

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.

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.