Controlling Where Elements Float

You can control which elements an element can float next to and which it cannot. To keep an element from floating next to something it shouldn't, use the clear property.

To control where elements float:

1.	Type clear:.
2.	Type left to keep elements from floating to the left of the element you're styling. Or type right to keep elements from floating to the right of the element you're styling. Or type both to keep elements from floating to either side of the element you're styling. Or type none to let elements flow to either side of the element you're styling.

Figure 11.38. Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise.

Figure 11.39. We could conceivably use clear:left here since the only floated element we have to worry about is floating on the left. But it doesn't hurt to clear both sides and it may come in handy if our design becomes more complicated.

Tips

• The clear property stops the affected element (the one to which the clear property is applied) from displaying until the designated side is free of floating elements.

• You add the clear property to the element whose sides you want to be clear of floating objects. So, if you want an element not to be displayed until the right side is clear of floating elements, add clear:right to it (and not to the floating elements).

• The use of the clear property is similar to the br tag with the (alas, deprecated) clear attribute (see page 98).

Figure 11.40. The clear property indicates that the element in question (the footer in this case) must not flow around the floated element but instead be displayed after the floated element.