CSS Clearing Floats

Question

I'm making more of an effort to separate my html structure from presentation, but sometimes when I look at the complexity of the hacks or workarounds to make things work cross-browser, I'm amazed at huge collective waste of productive hours that are put into this.

As I understand it, floats were never created for creating layouts, but because many layouts need a footer, that's how they're often being used. To clear the floats, you can add an empty div that clears both sides (div class="clear"). That is simple and works cross browser, but it adds "non-semantic" html rather than solving the presentation problem within the CSS.

I realize this, but after looking at all of the solutions with their benefits and drawbacks, it seems to make more sense to go with the empty div (predictable behavior across browsers), rather than create separate stylesheets, including various css hacks and workarounds, etc. which would also need to change as CSS evolves.

Is it o.k. to do this as long as you do understand what you're doing and why you're doing it? Or is it better to find the CSS workarounds, hacks and separate structure from presentation at all costs, even when the CSS presentation tools provided are not evolved to the point where they can handle such basic layout issues?

Answer 1

Clearfix is unnecessary most of the time, and the popular version of hack is needlessly verbose and complicated.

You can get clearing effect by applying overflow:hidden to the container. If container doesn't have fixed height, it will stretch to size of content anyway. It's not a hack, but specified behavior that works in all browsers.

And when you really need overflow:visible you can still clear without extra element in the markup:

 .container::after {
    content:"";  /* not "."! */
    display:block;
    clear:both;
 }

and that's perfectly standard CSS 2.1. In IE versions that don't support CSS 2.1, hasLayout happens to have desired effect:

 .container {
    zoom:1;
 }

Answer 2

Yours is the right approach. Rules are created for those who do not understand them. If you know all pros and contras, make your own call.

You are particularly justified in this case. CSS decided to ignore common wish to separate content A from content B horizontally, so you have to choose a hack you dislike least. I compare the three solutions already presented here.

• Your solution is bad because it changed content of the document, inserting element C whose only purpose is visual separation between A and B. Content should not serve layout purpose.
• Karpie’s solution is slightly worse (in my book) because it does the same in a sly way. Pseudo element ":after" was not designed for that. It has a great advantage, however, of never actually changing the HTML.
• PorneL’s solution achieves desired separation between A and B by radical change of properties of A. The change will not only separate A from B, but also separate A from preceding content, change the way width of A is calculated and so on. Of course, sometimes it’s perfectly OK, but you have to be aware of those unexpected side effects.

The choice is ours.