Clearfix

Classic CSS Clearfix.css

/*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%; }

clearfix-hack.html

/* 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>

davidwalsh-clear.html

/* 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;
}