HTML and CSS [Electronic resources]

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).

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.

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