Приглашаем посетить
Высоцкий (vysotskiy-lit.ru)

Clearing Floats

Previous Page
Table of Contents
Next Page

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.

Clearing Floats


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.

Clearing Floats


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

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

Clearing Floats


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

    Previous Page
    Table of Contents
    Next Page