Приглашаем посетить

Floating and Clearing

Another powerful technique you can use to organize your layout on the page involves combining floating and clearing, using the float and clear properties. Floating an element is another way of moving it out of the normal flow of the document. Elements that follow a floated element will sit next to the floated element if there is room. Think of floating as dynamic relative positioning; the behavior is predetermined, and you just have to invoke it.

The clear property enables you to stop elements moving up next to a floated element. If, for example, you have two paragraphs and only want the first to sit next to the floated element, even though both would fit, you can "clear" the second one so it positions under the floated element. Let's look at both these properties in more detail.

The Float Property

The float property is primarily used to flow text around images, but it is also the basis for one of the ways to create multicolumn layouts. Let's start with the basics.

The most common use for float is to make text flow around an image; in this respect, float works like the HTML property align. Here's an example

img {float:left; margin:0 4px 4px 0;}

This markup sets the image's float to the left so that the text wraps around it (Figure 4.18).

Figure 4.18. Here I used the `float` property to make text wrap around an image, with a small margin on the right and bottom of the image so the text does not touch it.

Floating and Clearing

For the float to work, the markup should look like this with the image first

There are many more rules that govern floats, and you can read about them in Eric Meyer's book Cascading Style Sheets 2.0 Programmer's Reference (2001, McGraw-Hill Osborne Media). It's a very useful reference for any serious CSS programmer.

<img ....../>
<p>…the paragraph text…</p>

In short, when you float an image or any element, you are asking it to be pushed up as far as possible to the left (or right, in the case of float:right) of the parent element. The elements that follow the floated element in the markup wrap around the element until they clear the bottom of it, and then normal layout resumes.

From here, it's a simple step to use float to form columns. By writing this,

p {float:left; width:200px; margin:0;}
img {float:left; margin:0 4px 4px 0;}

you create float for both the image and the text, which results in Figure 4.19.

Figure 4.19. When both elements are floated, the text becomes a column instead of wrapping around the image.

Floating and Clearing

When you float both the paragraph and the text, the text-wrapping effect stops and the text forms a column next to the image. This is the principle of creating multicolumn layouts using floats. As long as each element is floated, they line up like columns. If you do this with three floated, fixed-width divs, you get three containers into which you can put other non-floated elements (although they too can be floated if you wish). You'll see all of this in action in Chapter 5.

The Clear Property

The other property that is frequently used with float is clear. You have seen that text can wrap itself around a float. In the case of images, if a number of images are next to a float, the first one that can entirely clear (that is, start below the bottom of) the floated element resumes normal positioning. But sometimes you want an element to clear a float when it wouldn't normally do so.

To demonstrate this point, Figure 4.20 shows an example of a listing where each item comprises an image with text next to it, achieved by floating the images. It's like the example shown in Figure 4.18, but repeated three times. Each image should float next to its associated text down the page. However, when there is not enough text to clear the bottom of a floated image, as in paragraph 2 in Figure 4.20, the next image/paragraph pair moves up next to the float also.

Figure 4.20. In this example, float alone isn't producing the result we want.

Floating and Clearing

In this example, the float property is behaving just like it should; the third item has room to sit next to the previous floated element, so it does. Of course, this is not what we want. The fix here is to add a non-floated element into the markup that has a clear property applied to it to force the third item to start below the second. Here's the markup with an extra div element and an associated style added

[View full width]

<style type="text/css">
p {margin:0 0 10px 0;}        <-- a
img {float:left; margin:0 4px 4px 0;}
.clearthefloats {clear:both;}
</style>
</head>
<body>
<img src="/images/011/office_xp.gif" />
<p>
This is a paragraph of text about Microsoft Office XP...
</p>
<img src="/images/011/win_home.gif" />
<p>
This is a paragraph of text about Microsoft Windows XP...
</p>
<div class="clearthefloats"><!-- this div is not floated and its clear property is set to
 both--></div>
<img src="/images/011/win_pro.gif" />
<p>
Now the next image and paragraph...
</p>
</body>

(a)Creates space between each item

Floating and Clearing
The value of both on the clear property means the div clears (sits below) elements floated both left and right. You could have used the value left in this case, but by using both, if you switch the float on the images to right later, the clear still works.

With the additional markup, the page now looks correct (Figure 4.21).

Figure 4.21. When you use `clear`, the element is forced to sit below the floated element.

Floating and Clearing

After all my earlier comments about avoiding presentational markup, you might be wondering why I'm adding markup just to achieve a presentational effect. Well, it's because this is the simplest way to force-clear elements when you are just starting out with CSS. Just recently, the CSS gods worked out a way to clear elements without adding any presentational markup. You'll learn about this in Chapter 5 but if you can't wait, check out Position is Everything (www.positioniseverything.net/easyclearing.htm).

This new "cleared" element added between the second and third paragraphs is now positioned (invisibly, because it has no content associated with it) beneath the second image. Because the third image and paragraph follow this cleared element in the markup, they are positioned below it, and the desired layout is achieved.

Clearing floats is an important technique to master when you are creating CSS layouts. We will study this further, but this is enough information to get you started using floats as the basis of all-CSS page layouts. Before we get started using floats, there's just one more important property to understanddisplay.

Table of Contents

Floating and Clearing