Positioning Content - Learn to Code HTML and CSS: Develop and Style Websites - page 77

The left value will clear left floats, while the right value will clear right floats. The
both value, however, will clear both left and right floats and is often the most ideal value.
Going back to our previous example, if we use the clear property with the value of both
on the <footer> element, we are able to clear the floats (see Figure 5.5 ). It is important
that this clear be applied to an element appearing after the floated elements, not before,
to return the page to its normal flow.
1. footer {
2. clear: both;
3. }
Figure 5.5 A two-column page layout with properly cleared floats
Containing Floats
Rather than clearing floats, another option is to contain the floats. The outcomes of con-
taining floats versus those of clearing them are nearly the same; however, containing floats
does help to ensure that all of our styles will be rendered properly.
To contain floats, the floated elements must reside within a parent element. The parent ele-
ment will act as a container, leaving the flow of the document completely normal outside of
it. The CSS for that parent element, represented by the group class below, is shown here:
1. .group:before,
2. .group:after {
3. content: "";
4. display: table;
5. }
6. .group:after {
7. clear: both;
8. }
9. .group {
10. clear: both;
11. *zoom: 1;