Web Design in a Nutshell, 3rd Edition

Stopping text wrap

Text automatically wraps to fill the space along the side of an aligned image (or other inline object). To stop the text from wrapping and start the next line against the margin (instead of against the image), insert a line break (br) with the clear attribute.

The clear attribute gives the browser directions on where to place the new line. It has three possible values: left, right, and all. If an image is aligned right, insert <br clear="right" /> to begin the text below the image against the right margin. For left-aligned images, use <br clear="left" />. The <br clear="all" /> element starts the text below the image on both margins, so it may be the only value you’ll ever need. Figure 12-7 shows the result of this markup.

<p><img src="leaf.gif" alt="leaf illustration" align="left" hspace="12" />An
Oak and a Reed were arguing about strength.<br clear="all" />When a strong
wind came up,...

Figure 12-7. The clear attribute starts the next line below an aligned image

The preferred CSS method for preventing the following element from starting next to the floated image is to apply the clear property to the following element and specify the side (left, right, or both) that you want to start below any floated objects. Clearing is discussed in Chapter 21.