Skip to content

Instantly share code, notes, and snippets.

@wwqrd
Created November 15, 2013 11:21
Show Gist options
  • Save wwqrd/7482864 to your computer and use it in GitHub Desktop.
Save wwqrd/7482864 to your computer and use it in GitHub Desktop.
Clearfix
/* source: http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* source: http://davidwalsh.name/css-clear-fix */
/* Assuming this HTML structure:
<div class="clear">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.clear:before, .clear:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clear:after {
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment