HTML and CSS Reference
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
Forces the element to a new line below any left-floated elements.
Forces the element to a new line below any right-floated elements.
Forces the element to a new line below any floated elements.
Floats act normally. This is the default, but it can be used to override an earlier rule that uses the
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: