CSS Clearfix – Keeping Pesky Floats In Their Place

When websites were created from primarily utilizing tables and nested tables, using div element floats was not common lingo. This was a combination of first generation websites which were static and displayed a form style data of information, and the limitations of the CSS 1. Since CSS 2 created a more flexible ability of control from one area, the standard for sites became more precise, creative, and pages began being built using strictly <div> tags with a CSS stylesheet. Tables became a thing of the past and is hardly even used to present form data if you know what you are doing.

To achieve this new flexibility, defined <div> elements are floated are floated inside their parent <div>. However, a problem with floating elements is that if its contents height is greater than it’s parents, it will display outside it’s enclosure.

CSS has the “clear” parameter which allows you to define if you want to force the element to display below any floated elements with clear:left; clear:right; or clear:both;. The solution was to add an empty <div> below the floated items, but still inside the parent <div> and assign it as <div class=”clear”></div>, then in the stylesheet assign .clear{clear:both;} and ad a bunch of extra paramaters to set the font-size to 0 etc.

Traditional Style Example:

<div class=”parentDiv”>
<div class=”floatRight”>Content floated to the right</div>
<div class=”floatLeft”>Content floated to the left</div>
<div class=”clear”></clear>
</div>

Clearfix

Now there is no need to ensure that there is an extra div dedicated to clearing the floats. Not only was it a pain, but it junked up the code with a lot of un-necessary inclusions. Now all that is required is a copy/paste of some code into your stylesheet, then add the class to the parent <div>that contains the floats.

Clearfix Code

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
	.clearfix {display:block;}
/* End hide from IE Mac */

What is looks like:

<div class=”parentDiv clearfix”>
<div class=”floatRight”>Content floated to the right</div>
<div class=”floatLeft”>Content floated to the left</div>
</div>

On a final note, remember that you can assign multiple classes to an element by separating them by a space as shown in the example above.