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

One of those pitfalls is that occasionally the proper styles will not render on an element that
it is sitting next to or is a parent element of a floated element. When an element is floated,
it is taken out of the normal flow of the page, and, as a result, the styles of elements around
that floated element can be negatively impacted.
Often margin and padding property values aren't interpreted correctly, causing them to
blend into the floated element; other properties can be affected, too.
Another pitfall is that sometimes unwanted content begins to wrap around a floated ele-
ment. Removing an element from the flow of the document allows all the elements around
the floated element to wrap and consume any available space around the floated element,
which is often undesired.
With our previous two-column example, after we floated the <section> and <aside>
elements, and before we set a width property value on either of them, the content within
the <footer> element would have wrapped in between the two floated elements above it,
filling in any available space. Consequently, the <footer> element would have sat in the
gutter between the <section> and <aside> elements, consuming the available space
(see Figure 5.4 ) .
Figure 5.4 A two-column page layout without any identified column widths or cleared
floats
To prevent content from wrapping around floated elements, we need to clear, or contain,
those floats and return the page to its normal flow. We'll proceed by looking at how to clear
floats, and then we'll take a look at how to contain floats.
Clearing Floats
Clearing floats is accomplished using the clear property, which accepts a few different
values: the most commonly used values being left , right , and both .
1. div {
2. clear: left;
3. }