HTML and CSS Reference
In-Depth Information
The clear property instructs the browser to not allow any floats to descend below the element, nor or any
content to flow above it. The property accepts four values: left (clear on the left side, while the right side
flows normally), right (clear to the right while the left flows normally), both (clear content to both sides),
and none (don't clear floats at all, most useful for overriding any other clearing value applied elsewhere).
Clearing the flow of content around both sides of the footer element solves our flow problem.
As you can see in Figure 9-9, the footer clears the floating boxes and rests at the bottom of the tallest
column, pushed down by the boxes above it, and ready to receive some further styling to make it look
nicer (we added a dotted border just for this illustration).
Figure 9-9. The footer now clears the floats above it rather than flowing upward around them
Applying a clear property to an element is a foolproof way to clear floats, but sometimes you don't have
an element available to carry that property. In Listing 9-3 we've added another element that wraps around
and contains both our floating columns. You could use different elements, naturally, but we've gone with
another section for this example. We've also omitted the text to keep the printed markup short.
Listing 9-3. Wrapping a containing element around two floating columns
<section id="content">
<section class="main">
<!-- main content -->
</section>
<section class="extra">
<!-- extra content -->
</section>
</section>
Without an explicit declared height, an element will only be the height of its contents (plus any padding or
borders). Because floated elements allow content to flow around them, and with nothing else inside the
container to clear the floating boxes, the container has no height at all and will collapse vertically, just as if
it had no contents. Its floating children will spill out the bottom and any (uncleared) content that comes
after will flow up around those protruding floats. We've illustrated this effect in Figure 9-10, and added
 
Search WWH ::




Custom Search