Web Design in a Nutshell, 3rd Edition

The clear property may be applied only to block elements. It is best explained with a simple example. The left value starts the element below any elements that have been floated to the left edge of the containing block. The rule in this example ensures that all first-level headings in the document start below left-floated elements, as shown in Figure 21-7.

    img {float: left; margin-right: 10px; }
    h1 {clear: left; margin-top: 2em;}

Figure 21-7. Clearing a left-floated element

As you might guess, the right value works in a similar manner and prevents an element from appearing next to an element that has been floated to the right. The value both moves the element down until it is clear of floated elements on both sides. User agents are instructed by CSS 2.1 to add an amount of clearance space above the margins of block elements until the top edge of the content fits below the float.

Notice in Figure 21-7, that although there is a top margin applied to the h1 element, the text is touching the bottom of the floated image. That is a result of collapsing vertical margins on the h1 block element. If you want to be sure that there is space below a floated element, add a bottom margin to the float itself, because margins on floated elements never collapse. This remains true when a floated element is set to clear other floated elements on the same side of the page. In that case, adjacent margins ...