HTML and CSS —

Clearing Floats

Clearing a float means clearing away all subsequent content so that the element is still floated but is not surrounded by the other elements. The clear property takes a value of left, right, or both. By adding the clear: right; property to the content division, the floating navigation remains in place, but the text is cleared (see Figure 12-13).

Figure 12-13. Clearing a float allows the floated element to remain in place, while the subsequent content is cleared from around it.

I created two floating boxes in Example 12-9.

Example 12-9. Styling two floating boxes, one to the left and one to the right
#nav {float: right; border: 1px solid red; padding-right: 20px;  padding-top: 10px;
           margin-left: 10px;}

#nav2 {float: left; border: 1px solid red; padding-right: 20px;   padding-top: 10px;
           margin-right: 10px;}

Figure 12-14 shows what happens when I don't use a clear property for the content.

Figure 12-14. Without a clear, the content flows normally with the floated boxes.

I added a clear: both to the content style (see Figure 12-15).

Figure 12-15. Clearing both the left and right floated boxes.

Interesting, eh? You can see the beginnings of columns. You'll be working with floated columns in tutorial 13.