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:

.sidenote {
  float:left;
  width:10em;
  padding:0.5em;
  border:1px solid green;
  margin:0.5em 1em 0.2em 0
}

Sample HTML:

<p class="sidenote">This sentence is a note inserted to one side of the main text.</p>
<p>
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.
</p>

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:

.outerBlock {
  float:left;
  width:100%;
  background-color:yellow
}

.shortBlock {
  float:left;
  width:30%;
  height:1em;
  margin:2px;
  background-color:red
}

.tallBlock {
  float:left;
  width:30%;
  height:2em;
  margin:2px;
  background-color:blue
}

Sample HTML:

<div class="outerBlock">
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
<div class="shortBlock"></div>
<div class="tallBlock"></div>
</div>

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.

<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
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.
</p>

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.

<p style="float: left; border:1px solid green;">Floating box 1.</p>
<p style="float: left; clear: left; border:1px solid green;">Floating box 2.</p>
<p>
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.
</p>

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.

<p style="float: left; clear: both; border:1px solid green;">Floating box 1.</p>
<p style="float: left; border:1px solid green;">Floating box 2.</p>
<p>
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.
</p>

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"

---