Clever Geek Handbook

The best element for clearing floats in CSS?

I was wondering what would be the best element to clean up block-block elements?

Currently I have mostly used a div or p element with clear: both; applies.

What elements do you prefer or is it something like "best practice" for this?

+2


source to share


2 answers


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

If you want the block to expand to contain all of its floating content, adding an extra element (of any type) is the dirtiest option. There are a whole bunch of better ways to achieve this effect . I usually prefer overflow: hidden

container installation , but the best option is slightly different from context.



If you really want to use an actual (empty) element, it is better to use a div or as a span - they have no additional semantics.

+8


source


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 in the upper right corner of the parent, and #sidebarHandle and #sidebar float to be next to each other. p.clear clears floated.

In this case, what would be the best solution?

0


source






More articles:


All Articles