Question

I’m just learning the ropes on clearing floats for all browsers and had and idea.

Do you see any harm in defining this globally for all div elements?

div {
    _zoom: 1;          /* Clear floats for ie6. Does NOT validate. */
    overflow: hidden;  /* Clear floats for all other browsers. */
}

There would probably only be a few special cases where the above two rules would need to be overwritten. Off the top of my head, I can’t think of any problems that might come up as a result of the above rule, but maybe someone knows better?

What do you think?

EDIT 1:

Changed height: 100%; to _height: 1%;.

EDIT 2:

Changed _height: 1%; to _zoom: 1;.

This is the version I’m running with. Here is an excellent link to an article describing all clearing methods for newbies.

Answer 1

One potential problem you could run into is what happens when you float elements that arent divs. Your style covers <div /> tags, but nothing else so you’d have to keep that in mind in case you do use float on other tags.

It may be better to apply those styles to containers that need to clear floats rather than applying a catch-all that may not catch everything.

Also keep in mind that having hidden overflow may make it hard to apply some styles which rely on content extending beyond a div tag. A few situations I can think of are

• styles for sides or corners of elements for adding shadows or rounded corners, which typically overflow their container.
• Light boxes which may extend beyond the bounds of your container, if they’re placed within a <div />
• Custom javascript tooltips that are placed within <div />s. Tooltips typically “pop out” of their container, which could cause problems depending on how they’re designed.

These issues are easier to work around if you only do it on elements you need to and not all elements.