Pasamos por el pie con clear: both y por el overflow: hidden. Quizá la manera más correcta de limpiar flotaciones sea la que muestro a continuación:
Limpiamos el flujo de todos los elementos susceptibles de presentar el “problema” en Firefox:
div:after, ul:after, dl:after, dd:after, dt:after{content:"";display:block; clear:both; height:0; visibility:hidden;}
En Explorer 6:
/*limpiar flujo oculto para IE-mac \*/
* html div, * html ul, * html dl, * html dd, * html dt {height:1%;} /* final hack IE-mac */
En Explorer 7:
*:first-child+html div, *:first-child+html ul, *:first-child+html dl, *:first-child+html dd, *:first-child+html dt, *:first-child+html ol{height:auto; display: inline-block;}
Todas estas declaraciones son complétamente válidas y nos ahorramos el andar poniendo una clase “clear” o similar para los elementos que presentan el problema.
Es muy recomendable usar este último selector para Explorer 7 en hojas de estilo condicionales, ya que Explorer 8, “el amigo de los estándares”, ese que pasa el Acid Test pero sigue mostrando el texto alternativo de las imágenes en tooltips y los scrollbars muy monos, interpreta estas declaraciones con resultados bastante indeseables interpreta corréctamente la declaración display: inline-block. Pido disculpas a IE 8….
Interpretación de los valores de la propiedad display por diferentes navegadores.