Using Clearfix for Floated Elements
When you first start to work with the CSS "float" property in website design, you will run into issues related to the fact that floated elements are removed from the normal document flow, so you can end up with a cluttered mess with one part of your page overwriting another. Many times, the issue involves getting content to be properly positioned after the floated element(s). The way this is controlled is by using the "clear" property.
The box below illustrates a common usage of floated elements. We have a containing block-level element (a div) inside of which are three floated divs which form columns (albeit very small columns in this example). After the column containers, there comes some additional content. But there's a couple of problems…
3 Column Design With Trailing Content (BAD!)
Content...
...
...
...
...
Content...
...
...
...
...
Content...
...
...
...
...
Some additional content.
First, because the column boxes are set to 'float', they're removed from the normal document flow. That means that the containing div doesn't automatically expand vertically to contain them and so they overflow out the bottom. Second, the additional content is displayed adjacent to the last column div. What a mess! We need to use the 'clear' property to straighten this out.
As the W3C Definition for the "clear" property states, "This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box." I used this same code for the previous page on floats, but this time I added a paragraph of text that is intended to be beneath the columns. Since that p tag immediately follows the floated divs in the HTML code, it is also displayed on the same line as the column boxes.
The conventional solution would be to insert an element into the HTML after the last floated div with its CSS 'clear' property set to "left", "right", or "both" as needed. This would cause the document flow to move to the next non-floated vertical block edge - in this case, the left edge of the containing div. But that's not always practical and goes against the goal of separating content from presentation. Fortunately, CSS 3 provides a nifty method of eliminating the need for the extra element to provide the 'clear' effect that has come to be called "clearfix".
3 Column Design With Clearfix
Content...
...
...
...
...
Content...
...
...
...
...
Content...
...
...
...
...
Some additional content.
The box above starts with the same HTML and CSS as the first example, but I wrapped the floated divs in containing div with a CSS class of 'clearFix', which applies the magic effect we need. The CSS rule is as follows:
.clearFix:after {
content:'';
display:block;
clear:both;
height:0;
}
The effect relies on the CSS3 pseudo-selector 'after' to insert content after the .clearFix div. The rule species that the content inserted be displayed as a block-level element with both sides cleared and having no height - which means its effectively invisible. By clearing the floats, any content that comes afterward is positioned at the start of the next line. It's a simple and elegant fix to an annoying problem caused by floats.
This page was last modified on October 01, 2020
