Page Layout with CSS - HTML5 with CSS3 - page 306

Figure 9-7. The columns float side by side with more room to breathe
Clearing Floats
This is working out pretty well so far, with our columns floating side by side in perfect harmony. But a new
problem arises when we add more content outside the floating boxes, perhaps a footer element to
include some sort of tagline and a copyright statement.
A floated element is partially removed from the normal flow of content, allowing subsequent content to flow
upward and wrap around the floating box. However, when two adjacent boxes are both floating, there's
nothing to tell the browser where to draw their lower boundary. Content can flow upward around those
boxes, squeezing into whatever space is available. It's what floats are supposed to do, but in this case it's
not what we want. You can see an example of this phenomenon in Figure 9-8; because the two content
boxes are floating, the footer content flows up into whatever space it can find, even wedging itself into the
gutter.
Figure 9-8. Content flows around floating elements, even when you don't want it to
To remedy the situation, you must clear the floats by drawing an invisible line across their lower border
beyond which no content will flow. In this particular example, the tagline and copyright statement are in an
element that should span the whole page width, so that element itself can form the invisible clearing line
with a simple declaration:
footer { clear: both; }