Fazendo um filho float caber no pai

Já tomei murros na boca do estômago por isso. Colocava uma div float: left, por exemplo, e ela era maior que o conteúdo texto da div pai. Aí esse infeliz transbordava, sobrepunha os limites da div pai. Era um filho rebelde, que não obedecia os limites impostos.
Mas graças a essa página Easy Clearing, minha vida mudou! Sem usar HTML, comente com CSS, você coloca um ponto invisível agredago/depois da div e usa um display: inline-block (isso para funciona em todos os navegadores).

Esse é o CSS que você deve usar:

.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Aí, na div que vai flutuar, você coloca no atributo class dela esse nome "clearfix".
Exempo:

<div class="clearfix">...</div>

Lembrando que o class permite mais de uma classe:

<div class="menu lateralesquerda clearfix">...</div>

Assim ele puxa a formatação das classes menu, lateralesquerda e clearfix.

Abraço!