# Cascading Style Sheets/Floating Elements

IE6 and IE7 will place a floated element below an inline box that is its previous sibling
IE6 and IE7 will place an inline element below a floated element that is its previous sibling if it is floated to the right of that element
IE6 and IE7 will shrinkwrap an element styled float:left to the width of its containing block if the container has a right-floated child and an undefined width
IE6 and IE7 cleared elements will clear other nested floats even if they don't share a containing block
IE6 and IE7 cleared elements will have twice their declared top padding when displayed
A floated box can overlap block-level boxes adjacent to it in the normal flow, so use the clear property to reposition static boxes in the flow
The clear property can be used on a floated element to force it below adjacent floats, which is useful for aligning multiple blocks floating in the same direction
The clear property specifies if an element can have elements floated to its left, to its right, or not at all. When an element does not allow floating on a side, the element appears below the floated element.
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 for any properties except visibility and direction
In Firefox versions up to and including 2.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.
Use overflow: auto; display: block; float: left; margin: 0 auto; to position block elements onto the same line.
Floated elements are shrinkwrapped by surrounding block content unless overflow is set to auto or hidden on the surrounding blocks, in which case they are treated as inline blocks.
Floated elements following an absolutely positioned element will cause it to disappear in IE6 and IE7 unless the absolutely positioned element is set to clear:both
Instead of applying top margins to cleared static content apply bottom margins to floats for cross-browser consistency.
Floated elements do not support margin collapsing
Inline elements do not support clearing
Absolutely positioned elements do not support floating
Floating elements do not support inline-block or inline-table, each is rendered as block or table respectively
Floated elements cause adjacent inline elements to reflow

### Example 1

CSS rule:
Sample HTML:
Example rendering:
This sentence is a note inserted to one side of the main text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Example 2

Multiple objects can be floated within the same block
CSS rule:
Sample HTML:
Example rendering:

## Property clear

The property clear determines which sides of the floating element can be occupied by any of the previous floating elements. The property has no effect on next floating elements.
Possible values:
* left
* right
* both
* none
To understand the effect, compare the following examples featuring one non-floating element and two floating elements.
In the first example, the property clear is not used.
Floating box 1.
Floating box 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
In the second, example, the property clear is used in the second element to make sure no previous floating element comes to the left of it.
Floating box 1.
Floating box 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
In the third example, the float property has no effect, as it only affects previous floating elements.
Floating box 1.
Floating box 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

## Links

A few tips:
* a short discussion of "legacy" vs. "XML" styles of "clear" in CSS.
* "Clearing space beneath floated elements"
* If you want to add, say, a border around all floats ...
* W3.org: "Controlling flow next to floats: the 'clear' property"