Una de les tècniques més robustes actualment per aconseguir que una caixa contingui tots els seus fills flotants és usar overflow: hidden.

A Hack: Contenir caixes flotants vaig explicar el mètode tal i com el proposava n'Alex Walker però després de força proves l'he desestimat en pro d'aquest.

La tècnica

Donat un XHTML:

<div id="contenidor">
   <p id="flotant">
      Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit.
   </p>
   <p>
      Sed commodo. Fusce fringilla molestie libero.
      In ac diam vitae eros fringilla congue.
   </p>
</div>

S'aplicaria un CSS tipus:

#contenidor {
   overflow: hidden;
   _display: inline-block; /*només per IE6*/
}

L'ús del guió baix a l'exemple només serveix per marcar les propietats exclusives per l'Internet Explorer 6.

L'overflow: hidden farà que els navegadors tipus Firefox, Opera, Safari, Konqueror i Internet Explorer 7 contingui les caixes flotants.

Per l'Internet Explorer 6 caldrà afegir només per ell un display: inline-block. En navegadors tipus Opera i Safari pot donar algun efecte no desitjat.

Si s'ha de donar suport per Netscape 7.1 de Windows aquesta tècnica no és vàlida i caldria seguir emprant la tècnica de la caixa generada.

Aquesta solució funciona millor en la majoria de navegadors ja que l'ús de l'overflow: auto fa que la caixa capturi el focus creant un problema de navegació mitjançant el teclat i en Internet Explorer genera scrolls no desitjats.