Semantic HTML and Clear: Both

Question

We are trying to make our HTML much more semantic, and one thing that seems to linger in our HTML, which is relevant to the 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 that floated on the left in CSS and widgetPricing floating on the right (as an example).

Question:

My widgetRow div has no height or width. Is it wrong to add <div class="clear"></div> immediately after .footerInfo? It seems that I am not semantics at this moment.

More general question

When writing semantic HTML, is it possible to place a div in your HTML, whose only task is to clear the floats?

Answer 1

There are several ways to clean floating elements:

1. Use CSS alias: after class

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

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

2. Use overflow: auto or overflow: hidden

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

Apply the container class again to the widgetRow div. This approach may be a little more semantic, but it can also come back to bite you especially when looking at smaller displays. overflow: auto can trigger a horizontal scrollbar when overflowing: hidden can hide an element all together. problems using oveflow to clean floating files

3. Use clear: both

 .clear { clear:both; } 

This is the approach you take in the belief that your clear class is similar to the one above. This is the only approach that I know that it is compatible in all browsers and will not give you unwanted side effects. Therefore, depending on which browsers you support, I probably stick with what you have.

Answer 2

No. Blank markup provided for visual / stylish purposes only should be avoided (it also makes the page difficult to perform / scale)

Instead, you can use some non-structural cleaning methods, such as easyclearing (also used by H5BP), adding an extra style for floating wrappers

Answer 3

Have you tried using awesome clearfix hack ? Thus, you do not need to add redundant, non-semantic empty elements.

To answer your more general question - no, it is not semantically correct for adding empty elements to the layout. However, no one will get hurt if you have some empty <div> tags! :)

Answer 4

There are three main ways that I know how to clean floats.

• Empty div with clear:both; as you indicated.
• Adding the CSS overflow: auto property to the parent div.
• Using CSS pseudo-selectors to insert an element after an element and clear the float.

The pros and cons of these

Empty div

pros

• Widely supported by browsers.
• It has no side effects.

vs

• Adding additional markup only for cleaning floats.
• Many argue that this is not semantic.

Overflow

pros

• No extra markup.

vs

• May trigger unwanted scrollbars in certain cases.
• Automatic overflow was not really intended to be used for this particular purpose of cleaning floats.

Pseudo selector

pros

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

vs

• Not supported in ie7 and less.

Answer 5

Part of the excellent answers above, I would add another approach:

4. Use display: built-in unit + vertical align: top

This can also get complicated, especially in IE7 and older, because, according to http://www.quirksmode.org/css/display.html

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

It is currently widely supported, for some elements it will work even with IE6 / 7, and you will achieve the same effect as floating elements, but without a cleaning problem. In some cases, you can even make small changes to your markup (which will remain semantic) to use your own inline element. Hacking can also be used only for IE, see IE7 does not understand the display: inline block

Anex: Another possible overflow problem: hidden

Another approach to overflow: a hidden approach that I recently experienced: when using elements with an absolute location inside the hidden overflow element, they will be cut off by the container. So, for example, the CSS drop-down menu will not work well.