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.
Get Web Design in a Nutshell, 3rd 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.
