Floats moeten altijd gecleard worden als je geen onvoorziene omstandigheden wilt hebben in je layout, hier zijn 5 handige manieren om dit te doen:

Tip 1

HTML

<div id="outer">
	<div id="inner">
		<p>big floating contents</p>
	</div>
	<p>Main Content</p>
</div>

CSS

#outer {
overflow: auto;
height: 1%; /* for IE6 */
}

Tip 2

HTML

<div class="clearfix">
	<div class="floater">This text won't extend past the bottom of the "clearfix" div.</div>
</div>

CSS

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE5/Mac \*/
* html .clearfix {
height: 1px;
}
.clearfix {
display: block;
}
/* End hide from IE5/Mac */

Tip 3

HTML

<div class="spacer"></div>

CSS

div.spacer {
clear: both;
}

Tip 4

HTML

<br />

CSS

br {
clear: both;
height:0;
font-size: 1px;
line-height: 0;
}

Tip 5

HTML

<div class="newBFC">
	<div class="floater">
	This text won't extend past the bottom of the "newBFC" div.
	</div>
</div>

CSS

.newBFC {
overflow: hidden;
_overflow: visible; /* not valid */
_overflow-x:hidden; /* not valid */
_height: 0; /* not valid */
}
/*\*//*/
.newBFC {display: inline-block;}
/**/