Best element for clearing floats in CSS?

Question

hi guys,

I was wondering what the best element for clearing floated block-level elements would be?

For now, I mostly used a div or a p element with clear: both; applied.

What elements do you prefer, or what is something like the "best practice" for doing that?

Answer 1

If you really just want to clear them, then whatever element best describes the semantics of the content that you want to clear the float.

If you want to cause a block to expand to contain all it's floating content, then adding an extra element (of any type) is the dirtiest option. There are a whole bunch of better ways to achieve the effect. I generally favour setting overflow: hidden on the container, but the best option varies a little with the context.

If you really want to use an actual (empty) element, then either a div or as span is best — they don't come with extra semantics.

Answer 2

I have the following context:

<div id="sidebarWrap">
    <div id="sidebarHandle">
        <a href="#"></a>
    </div>
    <div id="sidebar">
        <h2>Category</h2>         
    </div>
    <p class="clear"></p>
</div>

Where #sidebarWrap is absolutely positioned to the top right of it's parent, and #sidebarHandle and #sidebar are floated to be next to each other. the p.clear clears the floating.

In this case, would there be a better solution?