Canceling a Float with Clear ......................................................................
Text listed in the HTML following a floating image usually flows down along-
side the image, as the various figures in this chapter demonstrate.
But what if you want to force some text to detach itself from the image it
would normally flow around? What if you want to move it down below the
image? Sometimes you don’t want text associated with a particular image.
Also, consider that the actual number of words needed to flow from the top to
the bottom of any given image can vary considerably. The user might resize the
browser window, for example, which has a big impact on the flow. Likewise, the
user’s preferred font size, the resolution of the screen, and other factors can
impact the amount of text that flows. In these situations, you may want to spec-
ify that some of your text must be displayed beneath a floated image — regard-
less of how much the user resizes the browser or other factors. That text must
always ignore the floating and appear below the image.
One problem with floating arises when you have several images on the page.
The clearproperty can assist you in ensuring that the each element of text
appears next to the image it’s associated with.
The CSS version of clearing is similar to the traditional HTML <br>element
used with a clearattribute. In CSS, you use the clearproperty, along with
the values left, right, or both. Only employ <br>with this CSS style to
force the text following the <br>to move down below any existing margins
(in other words, to move down into the next clear area on the page).
Here’s an example illustrating the effect that the clearproperty has. The fol-
lowing code inserts a plain <br>tag, but it doesn’t move the paragraph of
Figure 10-10:
You can
combine left
and right
floated
images, like
this.
194 Part III: Adding Artistry: Design and Composition with CSS
