The Clear Property

The clear property works with the float property. It specifies whether an element allows floating elements at its side; that is, more specifically, it lists the sides on which floating elements are not accepted.

Name:	clear
Value:	none | left | right | both
Initial:	none
Applies to:	all elements
Inherited:	no
percentages:	N/A

This property has four values:

• none This is the default.

• left

• right

• both

None means the element allows floating elements on both of its sides. Left and right mean the element does not allow floating elements on its left side and right side, respectively. Both means the element will not have floating elements on either side.

This property enables you to control text wrapping as a result of setting the float property. Commonly, designers want text to wrap around a floating element. However, cases may arise when you don't want this to happen. For example, if your document is starting a new section, you may want to ensure that the heading of that section doesn't occur next to an image that belongs in the previous section. You can set the clear property on the heading so that it doesn't allow floating elements at its sides (value both). Instead, the heading moves down until it is free of the previous section's floating element. Figure 8.15(a) shows what would happen if you did not set clear, while Figure 8.15(b) shows the result when you do. Here is the code that you would write to achieve the latter effect:

 /* Make all images float left: */ IMG { float: left } /* H2 headings must not be next to images: */ H2 { clear: both }

Figure 8.15. (a) With clear not set (the default none is assumed), the heading of one section is next to an image in the previous section; (b) with clear set to both, the heading moves down until it is free of the image.

The clear property can also be used on floating elements. For example, this style sheet:

 IMG {   float: right;   clear: right; }

ensures that an image floats to the right edge of its parent and that it won't be placed next to another floating element that may already be on the right edge. It will instead move down until it finds a clear spot in which it can fit. Figure 8.16 shows how this works.

Figure 8.16. (a) If clear is not set the default value none is assumed and the images are placed beside each other; (b) With clear set to right, the second image moves below the first image.