Page Layout with CSS - HTML5 with CSS3 - page 308

some padding, a darker background, and a dotted border so you can see the collapsed container that
would otherwise be invisible.
Figure 9-10. Uncleared floats overflow their container
If your design calls for a visible container with a background or border, you'll certainly want the container to
wrap around and enclose its contents. You could simply add some element inside the container to clear
the floats—an empty div or a line break—but that's just the sort of meaningless, presentational markup
you should try to avoid. Luckily there are a few ways to clear floats without adding an extra element.
Floats Within Floats
A floating element will automatically expand to contain any floating elements within it. Adding a float
property to the container and floating it to the left or right clears its inner floating boxes and the container
expands to enclose them (see Figure 9-11):
#content { float: left; }
Figure 9-11. Floating the container makes it enclose its floating children