CSS Property - Float

Value: left | right | none
Initial: none
Applies to: all elements
Inherited: no
Percentage values: N/A

With the value "none", the element will be displayed where it appears in the text. With a value of "left" or "right" the element will be moved to the left or right and the text will wrap on the right or left side of the element. With a value of "left" or "right", the element is treated as block-level (i.e. the "display" property is ignored).

Example:

img.imgr {
float: left;
margin-left: 0;
}

The above example will place all "image" elements with "class=imgr" along the right hand side of the parent element.

This property is most often used with inline images, but also applies to text elements.

Floating elements

Using the "float" property, an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element. For example, by setting the "float" property of an image to "left", the image is moved to the left until the margin, padding or border of another block-level element is reached.

The normal flow will wrap around on the right side. The margins, borders and padding of the element itself will be honored, and the margins never collapse with the margins of adjacent elements.

A floating element is positioned subject to the following constraints:

  1. The left outer edge of a left-floating element may not be to the left of the left inner edge of its parent element. Analogously for right floating elements.

  2. The left outer edge of a left floating element must be to the right of the right outer edge of every earlier (in the HTML source) left-floating element or the top of the former must be lower than the bottom of the latter. Analogously for right floating elements.

  3. The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element that is to the right of it. Analogously for right-floating elements.

  4. A floating element"s top may not be higher than the inner top of its parent.

  5. A floating element"s top may not be higher than the top of any earlier floating or block-level element.

  6. A floating element"s top may not be higher than the top of any line-box (see section 4.4) with content that precedes the floating element in the HTML source.

  7. A floating element must be placed as high as possible.

  8. A left-floating element must be put as far to the left as possible, a right-floating element as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Example:

<style type ="text/css">
img {float: left;}
body, p, img {margin: 2em}
</style>

<body>
<p><img src="img.gif" />
Some sample text that has no other...</p>
</body>

There are two situations when floating elements can overlap with the margin, border and padding areas of other elements:

  1. When the floating element has a negative margin: negative margins on floating elements are honored as on other block-level elements.

  2. When the floating element is wider or higher than the element it is inside