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?

you just need to add overflow:hidden; and clear:both; to widgetRow so that its height and width become non-zeros. No need for the "clear" div IMO. — frenchie, Sep 20 '12 at 14:34

Steve Haar · Accepted Answer · 2012-09-21T11:40:54.450

7

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.

edited Sep 21 '12 at 11:40

answered Sep 20 '12 at 15:06

Steve Haar

116
5

hah, no worries, +1 it's visually better organized than mine. – aziz punjani Sep 20 '12 at 15:31
Steve, just a quick comment. Shouldn't `.container:after { clear:both; }` have a `content` property as well ? I don't believe it will work without some content. – aziz punjani Sep 20 '12 at 15:38
Is all the css from this link required? http://www.webtoolkit.info/css-clearfix.html – Micky McQuade Sep 20 '12 at 15:48
asiz, you're right. You also need content: "." in the class. I've updated my answer to reflect this. – Steve Haar Sep 20 '12 at 15:52
Either `{ clear: both; content: "." }` or `{ display: table; content: " " }` will work. – aziz punjani Sep 20 '12 at 16:12
Wouldn't that show the period? You would need the other stuff that makes it hidden. Either way, I think I'm leaning towards the overflow method. – Micky McQuade Sep 20 '12 at 19:00
Micky, after testing this you're right. You do need other stuff. I've updated the css class in my answer to reflect this. – Steve Haar Sep 21 '12 at 11:43

Fabrizio Calderan · Answer 2 · 2012-09-20T14:46:09.230

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

edited Sep 20 '12 at 14:46

answered Sep 20 '12 at 14:36

Fabrizio Calderan

120,726
26
164
177

score 0 · Answer 3 · answered Sep 20 '12 at 14:34

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! :)

score 0 · Answer 4 · answered Sep 20 '12 at 15:01

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

Empty div with a clear:both; like you have specified.
Adding the CSS property overflow: auto to the parent div.
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.

score 0 · Answer 5 · edited May 23 '17 at 12:14

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.

Semantic HTML and clear: both

5 Answers5

Empty Div

Overflow

Pseudo selectors