Clearing floated elements with or without structural markup: Presentation vs. Content ~ Ben 2.0

Recently in the office the developers having been having a debate about how best to clear the space below floated elements. It seems we fall into two camps, one using purely CSS and the other using an XHTML element with some CSS applied to it.

Before reading this post you may want to read Eric Meyer’s article Containing Floats which explains the clearing problem well.

What I really want to discuss the merits and flaws of both methods and try and decide which method is best to use. It is really a debate about whether or not to add extra markup to your XHTML document.

Clearing With Structural Markup

A common technique is to place a <br /> or <div> with some CSS

.clearme { clear:both; }

This will clear the space below the floated element.

Pros

This method is easy to understand and implement.

If your layout and design allows it you can use existing elements on the page to do this job for you, e.g. a footer placed underneath the floated items.

Cons

In most cases you can not rely on using existing mark-up to clear floated items, especially for complex designs and layouts. Extra non-semantic mark-up then has to be added.

It is considered good practice to separate content and presentation and there is an argument that adding extra XHTML elements to clear floating items goes against this practice.

Using this method you are adding bits of mark-up that do not have any semantic value and are just used for layout purposes. Although not a terrible crime I do think that as a developer you should strive to produce mark-up that is as meaningful and semantically correct as possible. One of the reasons you still see sites with “divitus” is because many developers really have not grasped the finer points of semantic mark-up.

Clearing Without Structural Mark-up

This method popularised by positioniseverything uses some clever CSS to clear the floated elements:

XHTML

<div class="clearfix">
    <div class="floating">
        <p>The content ..</p>
    </div>
</div>

CSS

.clearfix:after {
    clear:both;
    content:".";
    display:block;
    height:0pt;
    visibility:hidden;
}

.clearfix {display: inline-block;}

For IE6 using conditional comments

.clearfix {height:1px;}

Basically the .clearfix class uses the :after pseudo-element to insert a ‘.’ after the floated element. This is then cleared achieving the desired results

Pros

This is a neat and elegant solution that does not require any additional mark-up, separating presentation from content. One of my work colleagues pointed out that the CSS is actually adding content into the page, therefore breaking the separation.

I would argue that it is not really altering the XHTML document itself and is OK, but would agree that it is a grey area.

Cons

A problem I have found with this solution stems from its complexity. A developer with a basic level of CSS knowledge will find it hard to fully understand what .clearfix is doing, therefore leaving it open to abuse and overuse.

Some of the CSS rules in .clearfix trigger IE to give an element “layout” (A mystery in itself). Giving elements layout in IE fixes a multitude of strange CSS rendering bugs. This may lead to .clearfix being used in the wrong context to fix CSS bugs and not as intended as a way to clear floated items.

This technique does not work in IE browsers, this is easily rectified for IE7, but IE6 needs a rule adding in the IE6 specific stylesheet, you may need to include an extra stylesheet to accommodate.

Summary

To clear floated elements using mark-up or not really boils down to the Content vs Presentation debate.

There is no doubt that HTML was designed to convey meaning and structure and not presentation. Some developers argue that you should try to use mark-up that has semantic value, adding extra elements in the code that have no semantic meaning and are just for layout should be avoided.

On the other hand some developers see the .clearfix class as a hack and that it is using CSS to add content thereby breaking the separation in that way.

The structural mark-up approach has a simplicity that I like, it uses a minimal amount of code to achieve its goal. But the CSS method has an elegance that wins me over and that is the method I use most of the time.

Which method you use really comes down to personal choice and the circumstance. For example, if you are knocking up a quick holding page and need to clear a floated item you are not going to use the CSS based method. You would need to add in an extra stylesheet, but that would be overkill for a holding page.

If you had a complex design to implement with lots of floated elements you may want to use the CSS based method, it would be a cleaner way to clear the elements without the added bloat of more XHTML on an already complex page.

Be pragmatic and use the right tools for the job.

I must however stress that if you don’t understand how .clearfix works then don’t use it!