The CSS clearfix class

This CSS clear fix uses :before and :after pseudo-elements of the container to perform the clear:

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

This CSS reliably clears floating child elements so that the next set of elements has a clear plane to begin from. 

Adapted from: http://davidwalsh.name/css-clear-fix

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s