Electronic Books

Floating an element is a way of moving it out of
the normal ?¬‚ ow of the document. Elements that follow a ?¬‚ oated element
will move up to sit next to the ?¬‚ oated element if there is room.
The clear property enables you to stop elements moving up next to
a ?¬‚ oated element. If, for example, you have two paragraphs and only
want the ?¬? rst to sit next to the ?¬‚ oated element, even though both
would ?¬? t, you can ???clear??? the second one so it is positioned under the
?¬‚ oated element. Let??™s look at both these properties in more detail.
The Float Property
The ?¬‚ oat property is primarily used to ?¬‚ ow text around images, but it
is also the basis for one of the ways to create multi-column layouts.
Let??™s start with an example of how to ?¬‚ ow text around an image.
img {?¬‚ oat:left; margin:0 4px 4px 0;}
This markup ?¬‚ oats the image to the left, so that the text wraps
around it to its right. (Figure 4.15).
FIGURE 4.15 A ?¬‚ oated image is
removed from the document ?¬‚ ow.
If a text element follows it in the
markup, that element??™s text will wrap
around it.
POSITIONING ELEMENTS 115
For the ?¬‚ oat to work, the markup should look like this with the
image ?¬? rst

??¦the paragraph text??¦

In short, when you ?¬‚ oat an image or any element, you are asking
it to be pushed as far as possible to the left (or right, in the case of
?¬‚ oat:right) of the parent element; in this case, body.


Pages:
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158