Aquest article ha quedat desfasat en pro de Contenció de caixes flotants amb overflow:hidden

A sitepoint.com han publicat l'artícle Simple Clearing of Floats de n'Alex Walker. En aquest explica una tècnica-hack per aconseguir contenir una caixa flotant dins de la seva caixa pare.

La tècnica

Suposant un XHTML tal com:

<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>

Usariem un CSS tal com:

div#contenidor {
   background: #fc0;
   overflow: auto;
   _width: 100%;
   _overflow: visible;
}
p#flotant {
   float:left;
   width: 100px;
   height: 200px;
   background: #f60;
}

La propietat clau és l'overflow. La reacció dels navegadors tipus Mozilla que no contenen els fills flotants —tal i com diu l'especificació— serà de contenir-los.

El width que usa el hack del subguió serveix perquè l'Internet Explorer també reaccioni contenint els fills flotants.

Font: 456 Berea Street.