Description

This property specifies whether or not a box should float and, if so, if it should float to the left or to the right. A floating box is shifted to the left or to the right as far as it can go, and non-floating content in the normal flow will flow around it on the opposite side. The float property is ignored for elements that are absolutely positioned. User agents are also allowed to ignore it when it’s applied to the root element.

See Floating and Clearing for more information about the behavior of floated elements.

Value

left

makes the element generate a block box that is floated to the left

right

makes the element generate a block box that is floated to the right

none

makes the element generate a box that is not floated

Compatibility

Internet Explorer versions up to and including 6 add three pixels of padding (in the floated direction) to adjacent line boxes.

In Internet Explorer versions up to and including 6, the left or right margins are doubled on floated elements that touch their parents’ side edges. The margin value is doubled on the side that touches the parent. A simple fix for this problem is to set display to inline for the floated element.

Internet Explorer for Windows versions up to and including 7:

• will place a floated box below an immediately preceding line box
• will expand a left-floated box to the width of the containing block if it has a right-floated child and a computed width of auto
• will apply a layout to a floated element
• don’t support the value inherit

In Firefox versions up to and including 3.0, a floated box appears below an immediately preceding line box. A left-floated box with a right-floated child and a computed width of auto expands to the width of the containing block.

In Opera up to and including version 9.2, if the computed width of the floated box is auto and it has floated children, its width is computed as if the floats don’t wrap and aren’t cleared.

In Opera version 10 and in Internet Explorer version 8, a series of floats with a specific width defined but no value for height will not take up space in the document but may have an effect on the width of a floated parent (in appearance it may seem as if the floats have been stacked vertically on top of each other) . Adding a specific height value or some content will cure the problem. This appears to be more of an undefined behaviour issue rather than a bug and results vary between browsers.