Semantic HTML and clear: both

Question

We are trying to get our HTML much more semantic and the one thing that seems to linger in our HTML that has to do with presentation is

<div class="clear"></div>

For example, if we have the following semantic html:

<div class="widgetRow">
    <div class="headerInfo">My header info</div>
    <div class="widgetPricing">$20 to $30</div>
    <div class="footerInfo">My footer info</div>
</div>

And I have headerInfo and footerInfo both floated left in the CSS and widgetPricing floated right (just as an example).

The Question:

My widgetRow div doesn't have any height or width. Is it wrong to add <div class="clear"></div> right after .footerInfo ? It seems that I'm not being semantic at that point.

The More Generic Question

When writing semantic HTML, is it ok to put a div in your HTML whose only job is to clear the floats?

Answer 1

There are several ways to clear floats:

1 . Use CSS pseudo :after class

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

Apply the container class to your "widgetRow" div. This approach is probably the most semantic, but it is not supported on all browsers, specifically IE7 and below. browser support for :after

2 . Use overflow:auto or overflow:hidden

.container { overflow:auto; }
.container { overflow:hidden; }

Again, apply the container class to your "widgetRow" div. This approach may be a little more semantic, but it could also come back to bite you especially when viewed on smaller displays. overflow:auto could trigger a horizontal scrollbar while overflow:hidden could hide the element all together. problems using oveflow to clear floats

3 . Use clear:both

.clear { clear:both; }

This is the approach you are using assuming your clear class is like the one above. This is the only approach I know of that is compatible in all browsers and won't give you undesirable side effects. So, depending on what browsers you support, I would probably stick with what you have.

Answer 2

No. Empty markup introduced only for visual/styling purposes should be avoided (it makes also the page hard to mantain/scale)

You could instead use some non-structural clearing methods like easyclearing (also used by H5BP) adding some extra style to float wrappers

Answer 3

Have you tried using the awesome clearfix hack ? You don't need to add redundant, non-semantic empty elements this way.

To answer your more general question - no it's not semantically valid to add empty elements for layout purposes. However, nobody's going to get hurt if you have a few empty <div> tags! :)

Answer 4

There's three basic ways i know of clearing floats.

1. Empty div with a clear:both; like you have specified.
2. Adding the CSS property overflow: auto to the parent div.
3. Using CSS pseudo selectors to introduce an element after the element and clearing the float on that.

Pros and cons of these

Empty Div

pros

• Widely supported by browsers.
• Doesn't have any side effects.

cons

• Addition of extra markup just to clear floats.
• Many argue this is not semantic.

Overflow

pros

• No extra markup.

cons

• May trigger unwanted scroll bars in certain instances.
• Overflow auto was not really intended to be used for this specific purpose of clearing floats.

Pseudo selectors

pros

• No extra markup.
• More elegant than the other methods, imo.

cons

• Not supported in ie7 and less.

Answer 5

A part from the excellent answers above, I would add one more approach:

4. Use display:inline-block + vertical-align:top

This one may become also tricky, specially in IE7 and older, because, according to http://www.quirksmode.org/css/display.html

IE 6/7 accepts the value only on elements with a natural display: inline

It is widely supported nowadays, for certain elements it will even work with IE6/7, and you will achieve the same effect as floating elements, but without the clearing issue. In some cases you could even make slight changes to your markup (that will remain semantic) to use a native inline element. A hack could also be used only for IE, see IE7 does not understand display: inline-block

Anex: Another possible issue with overflow:hidden

Another con to the overflow:hidden approach that I recently experienced: when using absolute positioned elements inside an overflow:hidden element, those will be cropped by the container. So, for instance, a CSS dropdown menu will not work well.