Clearfix mixin should contain margins

There are two common “clearfix” hacks:

- Apply `overflow: hidden`. This creates a block formatting context which by definition contains floats, but also contains margins of child elements.
- Use a version of the “micro clearfix”, which uses generated content and the `clear` property.

The latter is what our `@mixin clearfix` does. However, the version we use doesn’t contain margins, so isn’t consistent with `overflow: hidden`. It’s a good idea to have the rendered result of both methods be consistent, so we should use the Nicolas Gallagher version (minus the stuff for old IE). 

Status: **Ready to merge**
Reviewers: @jeffkamo @kpeatt

## Changes
- Add a :before element to contain top margins of children
- Update comments (also simplified the example)
- Added a link to the Gallagher version