Creating a Multicolumn Layout - CSS3 Foundations - page 122

Figure 8-1 The main text flowing to the right of the floating image.
clear
Initial value: none | Inherited: No | Applies to: Block-level elements (covered in Chapter 9) | CSS2.1
Browser support: IE4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
You may notice that now the product image is floating and the text flows to its right, so too does the “Why Choose
Cool Shoes & Socks” title and list items below it (contained with the <div class=”benefits”> element). As-
sume the “Why Choose Cool Shoes & Socks” content is to appear below the product image, it can be pushed down
by clearing the float.
clear works in tandem with the float property and accepts the values left , right , both , and none .
1. In styles.css, add a new rule set for .benefits , like so:
.benefits {
clear: left;