Chapter 10. Floating and Shapes
For a very long time, floated elements were the basis of all our web
layout schemes. (This is largely because of the property clear, which
we’ll get to in a bit.) But floats were never meant for layout; their
use as a layout tool was a hack nearly as egregious as the use of tables
for layout. They were just what we had.
Floats are quite interesting and useful in their own right, however, especially given the recent addition of float shaping, which allows the creation of nonrectangular shapes past which content can flow.
Floating
You are likely acquainted with the concept of floated
elements. Ever since Netscape 1.1, 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 (such as
text) to “flow around” the image. The name “floating,” in fact, comes
from the Netscape DevEdge page “Extensions to HTML 2.0,” which stated:
The additions to your ALIGN options need a lot of explanation. First, the values “left” and “right”. Images with those alignments are an entirely new floating image type.
In the past, it was only possible to float images and, in some browsers,
tables. CSS, on the other hand, lets you float any element, from images
to paragraphs to lists. In CSS, this behavior is accomplished using the
property float.
Get CSS: The Definitive Guide, 4th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
