Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

18.3. Floating Elements

Occasionally, it is useful to float an element outside of the normal flow of a document's elements. When elements are floated, they are removed from the normal flow and are placed against the specified margin of the user agent's view port.

The float property is used to control the floating behavior of elements and has the following syntax:

float:  right | left | none;

The default behavior of elements is none—the element is positioned in the normal flow of elements. If the float property is set to right, the element is floated to the right margin of the user agent's view port; if the float property is set to left, the element is floated to the left margin.

For example, the sphere image in Figure 18-11 is not floated; it appears in the position where it is placed in the document's code—in-line with neighboring elements.

Figure 18-11. Figure 18-11

The same image appears in Figure 18-12 with the following style applied:

img  { float:  left; }

Figure 18-12. Figure 18-12

Neighboring elements flow around floated elements instead of being rendered in-line with them. The flow is still subject to appropriate margin and other values of the associated elements.

If you do not want elements to flow around neighboring floating elements, you can use the clear property to ...