Question

What is currently considered the best way to clear CSS floated elements that will:

• Keep the HTML markup as semantic and free of unnecessary elements as possible, and
• Be a cross-browser, cross-platform solution that works reliably for the majority of browsers?

Answer 1

This isn’t a graphic design question. It’s a CSS one, so belongs on StackOverflow.

That said, the answer for keeping the HTML clean is simply to give the parent an overflow. So if your markup is:

<div class="wrapper">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>

you can give wrapper an overflow:

.wrapper {overflow: auto}

And now .wrapper will contain both the floats.

That’s usually all that is needed.

Sometimes, in older IEs, the container also needs a width.