Cascading Style Sheets: The Definitive Guide

Floating and Clearing

You are almost certainly acquainted with the concept of floated elements. Ever since Netscape 1.0, it has been possible to float images by declaring, for instance, <IMG SRC="b5.gif" align="right">. This causes an image to float to the right, and allows other content (text or other images) to “flow around” the image. In the past, this was only possible with images and, in some browsers, tables. CSS, on the other hand, allows any element to float, from images to paragraphs to lists. In CSS, this behavior is accomplished using the property float .

float

Values

left | right | none

Initial value

none

Inherited

no

Applies to

all elements

For example, to float an image to the right, you could use this markup:

<IMG SRC="b5.gif" style="float: right;" alt="section b5">

As Figure 7-63 makes clear, the image “floats” to the right side of the browser window. This is just what we expect. However, some interesting issues are raised in the course of floating elements in CSS.

Figure 7-63. A floating image

Floated Elements

There are a few things to keep in mind with regard to floating elements. In the first place, a floated element is in some respects removed from the normal flow of the document, although it still affects the layout. In a manner utterly unique to CSS, floated elements exist almost on their own plane, yet they still have major influence over the rest of the document.