Normally, the <br> tag tells the browser to immediately stop the current flow of text 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 margins.

HTML 3.2 provides 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 both margins are clear of images, the browser resumes the text flow.

Figure 4.19 illustrates the effects of the clear attribute when Netscape renders the following HTML fragment:

<img src="http: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 white space above this text and to the right of the
image.

Inline HTML 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 only works in combination with left- or right-aligned images or tables. [the section called "The align attribute"] [the section called "The align attribute"]

The following HTML 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>
And the text just keeps flowing along....

Figure 4.20 illustrates the results of this example code.

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. [the section called "The <img> Tag"]