Web Design in a Nutshell, 3rd Edition

In this simple example, the float property is used to float an image to the right (Figure 21-1).

    img {float: right; margin: 20px;}

    <p><img src="img/placeholder.gif">Aliquam pulvinar volutpat...</p>

As you can see in Figure 21-1, the float property applied to the img element effectively replaces the deprecated align attribute. In this image example, the margin does the work of the deprecated hspace and vspace attributes. The advantage of margin is that you can apply different amounts of margin space on each side of the

Figure 21-1. Floating an image to the right

image (hspace and vspace apply the same amount of space on opposite sides). Padding may also be used to add space around the contents of a floated element.

Although the behavior in this example should be familiar to those who have worked with HTML, it is quite interesting when considered in terms of the CSS visual layout model. Floated elements are removed from the normal flow of the document, yet they still have an effect on other elements in the layout—surrounding content is reflowed to stay out of their way. To use one popular analogy, they are like islands in a stream—they are out of the normal flow, but the stream has to flow around them. Floated elements are unique in this regard, because elements removed from the flow normally cease to have influence on other elements (this will be discussed in the upcoming positioning ...