What's It All About
A momentary indulgence to put together a layout that operates from a single stylesheet, has a visually simple layout, and isn't too concerned with older browsers.
On Clearing
Floated elements will not be contained by their parent elements unless there is
another element that clears all previously floated elements before the end of
of the containing parent element. A simple approach to this is sticking an empty
DIV element at the end of an element that contains floated child elements and
give that DIV a clearing rule (clear:both).
The clearing element has been frowned upon because it requires extra markup in your web page and in a perfect world such superfluous markup would not be needed. To that end developers have come up with creative ways to not use a clearing element such as clearfix.
A newer approach to this problem has been to simply apply the rule overflow:auto or
overflow:hidden to the container element. Modern browsers will then allow that
element to grow to contain its children without the use of a clearing element.
These approaches have their downsides. For example the overflow rule will not work on this layout's horizontal menu because when the drop-downs appear they will either not appear at all (they are hidden overflow) or the entire box will expand to contain the newly appeared menu thus dropping the content of the page down in a rather disturbing manner.
Clearfix works, but to completely employ clearfix requires a couple dozen lines of CSS and embedded stylesheets to employ conditional comments for IE browsers. A few characters of superfluous markup was just traded for a few dozen lines of superfluous markup.
The advantage to a clearing element comes in its simplicity, clarity, and compatibility. One CSS rule is all that's needed to empower the clearing element to work in every browser that understands floats. The extra markup required is minimal and its purpose is easily understood to someone looking at a web page's source. The clearing element is a technique that has been in place since CSS was first introduced and it's a technique that should continue to be used today.
Space Consistency
Two margins placed next to each other in the layout of a web page will collapse into a single margin the size of the larger of the margins. If anything comes between the margins such as a border or padding then the margins will not collapse. Understanding this property of web page layout is vital in creating pages with consistent space between elements of the page. That consistency of space provides readers with a visual pattern to follow when they use the page. Differences in that pattern will stand out and may disrupt a reader's eye flow leading to a negative impression of the page.
To that end this layout incorporates "gutter" elements that line major content containers such as the columns, masthead, and footer. These gutter elements have only margin values applied with no padding or borders. These gutter elements set minimum amount of space between the edges of major containers and their content. Because margins collapse any content that contains margins (paragraphs, headings, etc.) will have its margins collapse with the gutter element rather than adding to the space. As long as that content works in margins rather than padding you can be sure that a consistent gap will exist around content and their containers