Skip to content

Instantly share code, notes, and snippets.

@prisskreative
Last active December 21, 2015 01:59
Show Gist options
  • Save prisskreative/6232262 to your computer and use it in GitHub Desktop.
Save prisskreative/6232262 to your computer and use it in GitHub Desktop.
Clearfix
/*You should apply this class onto a container which holds
floating elements. This will ensure any content which comes
afterwards will not float but instead be pushed down and cleared. */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/* best method to clearfix - a new micro clearfix hack *
<div class="clear">
<div class="group"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
*/
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after {
clear: both;
}
/*fi ie 7*/
.group{
*zoom: 1;
}
</style>
/* 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: " ";
display: table;
}
.clear:after {
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment