HTML and CSS Reference
In-Depth Information
Wrapping Floated Columns with
overflow:auto
,
overflow:hidden
, or
.clearfix
You've seen that when tall floated elements get pulled out of the doc-
ument flow, their containing element collapses to the height of the
remaining content (if there is any). This is often undesirable when
that container is intended to be a self-contained content item. There
are two ways to prevent this collapsing behavior. You can either hold
the container open by clearing the float with a nonfloating content
element at the end of the block or force it to grow to include all its
contents.
You can accomplish the first by adding additional markup such
as
<br
style=”clear:both”>
right before the end of the container.
Littering documents with presentation markup should be avoided,
and so generated content is often used to emulate this clearing
behavior. Full explanations of this technique, often applied by
styling a utility class called
clearfix
, is described at Position is
Everything (
http://www.positioniseverything.net/easyclearing.html
).
A side effect of setting the
overflow
property on an element to
auto
or
hidden
is that the element should encompass all of its content,
regardless of whether that content is floated. In the case of an
auto
height on the container, it will spring back and expand to cover
even floated content. This more elegant solution to the float clear-
ing problem, as well as a number of other techniques, is covered in
a follow-up to the PIE article by Alex Walker on Sitepoint (
http://
