The Float Property

The float property allows you to place an element at the left or right edge of the parent element.

Name:	float
Value:	left | right | none
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A

A value of left causes the element to be moved (to "float") to the left edge of its parent until it encounters any margin, padding, or border of another block-level element. A value of right causes the same action on the opposite side. A value of None causes the element to be displayed where it appears in the text.

The left and right values of the property, in effect, take an element out of the normal flow of elements. The element is then treated as a block-level element regardless of what display property setting it has. The text that followed the element either continues in the main flow or wraps around the floating element on the opposite side. If there is no room for the element to float at the specified edge, it moves down to the nearest spot in which it can fit.

This property is used most often for inline IMG elements, which are treated as a block-level element for purposes of this property. For example,

 IMG.face {   float: left;   margin-left: 3px 3px 3px 0 }

places each IMG elements of the class face along the left side of the image's parent and flush against the parent's left edge with a little white space on the other sides. See Figure 8.13(a).

Figure 8.13. Floating images.

With this rule:

 IMG.face {   float: right;   margin-right: 3px 0 3px 3px }

those same IMG elements are placed along the right of the parent flush against the parent's right edge. See Figure 8.13(b).

Typically, all the floating element's margins, padding, and borders are honored; that is, margins are not collapsed with the margins of adjacent elements. There are cases in which a floating element can overlap with the margin, border, and padding of another element. For example:

1. When the floating element has a negative margin. Negative margins are honored as they are on other block-level elements (see Figure 8.14(a)).

   Figure 8.14. Two cases when a floating element can overlap another element's margin, border, and padding: (a) the floating element has a negative margin; (b) the floating element is wider than its parent.

   
   
   

2. When the floating element is wider or higher than its parent (see Figure 8.14(b)).