Stopping Elements from Wrapping

A floated image affects all the elements that follow it, unless you insert a special line break. The clear attribute added to the regular br tag indicates that the text should not begin until the specified margin is clear (that is, at the end of the image or images).

To stop elements from wrapping:

1.	Create your image and the text or other elements (see pages 96 and 97).
2.	Place the cursor where you want to stop wrapping text and elements to the side of the image.
3.	Either type <br clear="left" /> to stop flowing content until there are no more floating objects aligned to the left margin. Or type <br clear="right" /> to stop flowing content until there are no more floating objects aligned to the right margin. Or type <br clear="all" /> to stop flowing content until there are no more floating objects on either margin.

Figure 5.28. Notice the order: first the house, then the header, then the flower logo, then more text.

Figure 5.29. The clear="left" attribute makes the text stop flowing until it reaches an empty left margin (that is, below the bottom of the left-aligned flower).

Figure 5.30. With clear="all" the text won't flow until both the left and right margins are completely clear.

Tips

• The clear attribute is deprecated in favor of style sheets. However, I think it's important to know about the clear attribute. For information on using styles to control the text flow, consult Controlling Where Elements Float on page 182.

• Note that the clear attribute affects the elements that follow a floated image, while the CSS clear property described on page 182 more directly affects the floated element itself. It's just a slightly different perspective.