4.6. Precise Spacing And Layout - HTML & XHTML - O'Reilly

The clear attribute

Normally, the <br> tag tells the browser to stop the current flow of text immediately and resume at the left margin of the next line or against the right border of a left-justified inline graphic or table. Sometimes you'd rather the current text flow resume below any tables or images currently blocking the left or right margin.

HTML 4 and XHTML provide that capability with the clear attribute for the <br> tag. It can have one of three values—left, right, or all—each related to one or both of the margins. When the specified margin or margins are clear of images, the browser resumes the text flow.

Figure 4-14 illustrates the effects of the clear attribute when the browser renders the following HTML fragment:

<img src="kumquat.gif" align=left> This text should wrap around the image, flowing between the image and the right margin of the document. <br clear=left> This text will flow as well, but will be below the image, extending across the full width of the page. There will be whitespace above this text and to the right of the image.

Figure 4-14. Clearing images before resuming text flow after the <br> tag

Inline images are just that—normally in line with text, but usually only a single line of text. Additional lines of text flow below the image, unless that image is specially aligned by right or left attribute values for the <img> tag (similarly for <table>). Hence, the clear attribute for the <br> tag works only in combination with left- or right-aligned images or tables. [<img>, 5.2.6] [The align attribute (deprecated), 10.2.1.1]

The following XHTML code fragment illustrates how to use the <br> tag and its clear attribute as well as the <img> tag's alignment attributes to place captions directly above, centered on the right, and below an image that is aligned against the left margin of the browser window:

Paragraph tags separate leading and following text flow from the captions. <p> I'm the caption on top of the image. <br /> <img src="kumquat.gif" align="absmiddle"> This one's centered on the right. <br clear="left" /> This caption should be directly below the image. </p> <p />

Figure 4-15 illustrates the results of this example code.

Figure 4-15. Captions placed on top, center-right, and below an image

You might also include a <br clear=all> tag just after an <img> tag or table that is at the very end of a section of your document. That way, you ensure that the subsequent section's text doesn't flow up and against that image and confuse the reader.[<img>, 5.2.6]