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,
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
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
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.