LAYOUTS - CSS: Professional Techniques for Modern Layout - page 117

Figure 4-12: Using adjacent siblings and clear to push the footer below fl oated columns.

119

Since both the columns and the paragraph share the same parent element, they're siblings.
h erefore, we can use the adjacent-sibling combinator ( + ) to select the paragraph and have it
clear.

A more generic solution is to replace the p with a universal selector:

div.three + * { clear : both ;}

h at way, any element, be it paragraph, list, table, preformatted code, or anything else, will be
cleared.

Note that there is an easy way to break this approach, and that's to enclose the columns in
their own div .

< div class="columns">
< div class="column one">...< / div>
< div class="column two">...< / div>
< div class="column three">...< / div>
</ div>
< p>...< / p>