Page Layout with CSS - HTML5 with CSS3 - page 310

We could show you a screen capture of the results, but it looks exactly like Figure 9-11. The overflow
declaration makes the container expand around the floating boxes within. It's not exactly what the
overflow property was meant for, but it works reliably in all compliant browsers.
Using the overflow property to contain floats can work well in many cases, but isn't always infallible. The
trick only works when the containing element has a height value of auto (the browser default), allowing it
to automatically expand vertically to accommodate its contents. An explicit height combined with
overflow:hidden or overflow:auto triggers the expected overflow behavior, clipping or scrolling the
overflow rather than expanding the element around the floats. As for width, sometimes it's preferable to let
overflowing content be visible rather than hiding it or invoking scrollbars, so using overflow to contain
floats might have some negative side effects when the content is too wide for its box.
Generated Content
Among the many innovations that were introduced in CSS level 2 are the :after pseudo-element selector
and the content property to generate content on the rendered page. You can cleverly combine these two
features of CSS to clear floats without any additional markup.
A pseudo-element is a CSS selector that targets an element that doesn't actually exist in the document but
is implied by its structure. Combined with another selector, the :after pseudo-element selects an
imaginary element immediately after the reference element. Then you can apply any other CSS properties
to that non-existent pseudo-element.
The content property renders the text of its value onto the page at the position of the selected element.
This generated content doesn't actually exist in the document; it's merely displayed, so this property is only
appropriate for decorative or presentational content, never for anything that should be meaningful or
accessible.
In Listing 9-4 we've used these features together to create a presentational pseudo-element at the end of
the containing block, and that new element can clear the floats above it. Its text content can really be
anything because it'll be hidden anyway, but a single dot will suffice. It must be declared block-level for the
clear property to take effect, and we can minimize the layout effects of this pseudo-element on its
surroundings by giving it zero height and making it invisible. All it does is clear the floats and nothing else.
Listing 9-4. This CSS rule clears floats without adding any presentational markup
#content:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
Once again, we could show you a screen shot of the result, but it looks just the same as the previous
clearing methods. This technique, first devised by Tony Aslett, is written up in much greater technical detail
at positioniseverything.net/easyclearing.html . The approach is relatively foolproof and it's well
supported by all the current browsers, but older browsers didn't support generated content or the :after