The reason floating was introduced in CSS at all wasn't for layout, per se. The intent was to be able to float elements, particularly images, and have content flow around the image (see Example 12-7).
Example 12-7. Floating an image
<style type="text/css">
img {
float: right;
padding: 15px;
}
</style>
Figure 12-11 shows the results. I've added styles to spice up the look.
Figure 12-11. Floating an image allows text to flow around the image, resulting in a sophisticated look.
Just as you can float an img element, you can float any element. So, if your navigation is in a div and you want to float that element, you can do so (see Example 12-8).
Example 12-8. Floating a div
#nav {
float: right;
border: 1px solid red;
padding-right: 20px;
padding-top: 10px;
margin-left: 10px;
}
Figure 12-12 shows how the nav div and the elements it contains are now floated to the right, just as the image would be. By doing this, you've actually created a floating navigation system that you can style to your heart's content.
Figure 12-12. Floating a boxthe nav div is now floated, just as an image would be.
You can now quite easily imagine how floats can be used for laying out portions of a document.