Last Updated: February 25, 2016
·
1.47K
· tombeynon

Clearing floats, the alternative way

Everyone knows about clearing elements; that annoying CSS behavour where floated elements don't affect the height of their containing element. By adding a clearing div, we force this behaviour.

<div class="parent">
    <div style="float:left;">Some left aligned content</div>
    <div style="float:right;">Some right aligned content</div>
    <div style="clear:both;"></div>
</div>

A much less known technique, and something I use 9 out of 10 times where this behaviour occurs, is just to give the parent element an overflow style of 'hidden'.

<div class="parent" style="overflow:hidden">
    <div style="float:left;">Some left aligned content</div>
    <div style="float:right;">Some right aligned content</div>
</div>

This will force the parent element to expand to the height of the child elements, eliminating the need for an unnecessary, non-semantic clearing element.

1 Response
Add your response

Or even better create a class of cf and then use a pseudo element to clear the floats. So the container holding the floats has a class of cf and in your styles use:

.cf:after {
content:"";
clear:both;
display:block;
}

over 1 year ago ·