Floating Elements for Layout - Beginning CSS3 - page 127

Preventing Elements from Moving Alongside a Floated Element
To force an element to move down below a floated element, such as an image, use the clear property, which
accepts the values listed in Table 7-2 .

Table 7-2. Values Accepted by the clear Property

Value Description

left Forces the element to a new line below any left-floated elements.

right Forces the element to a new line below any right-floated elements.

both Forces the element to a new line below any floated elements.

none Floats act normally. This is the default, but it can be used to override an earlier rule that uses the

clear property.

Because clear is not inherited, you can use the inherit keyword to make a child element act the same way
as its parent.
The image in Figure 7-6 is floated left, so setting the heading's clear property to left in float_clear.html
prevents it from moving into the space alongside the image, as shown in Figure 7-7 .

Figure 7-7. The heading now occupies a line of its own

Although the clear property has separate values for clearing left- and right-floated elements, it's often
convenient to set clear to both to avoid having to change the value if you decide to alter your layout and float
elements in the opposite direction. For example, by using the following style for <h2> headings, it doesn't matter
if the preceding image is floated left or right:
h2 {
clear: both;
}