Solución sencilla para float sin utilizar clear

Cuando con CSS necesitamos tener un texto que fluya alrededor de una imagen, un destacado o algo similar, utilizamos el atributo float, el cual sin embargo produce diversos problemas. Si el texto es mayor que la altura del contenido sobre el que fluye no pasa nada, pero cuando es más corto hace que la capa que contiene el texto no «calcule» correctamente la altura, ya que parece no tomar en cuenta la altura de la capa que flota. En esta página puede verse un ejemplo del problema en acción, si hacemos el «Inner Div» que es el que flota, más corto que el «Outer Div».

Para resolver este problema hay diversas soluciones de las cuales la más habitual suele ser utilizar algo tipo
. Hoy he leido un post en SitePoint en el que se habla de este problema, se comentan varias soluciones, y finalmente se comenta la que parece ser la más sencilla.

Se basa en la utilización de overflow:auto en la capa de texto. Esta a mi juicio es una buena solución ya que permite resolver el problema sin afectar al html de la página, al evitar la utilización de etiquetas sin valor semántico. Este es un ejemplo de su utilización y funcionamiento.

Como es habitual tiene algún problema referido a que pueden aparecer scrolls interiores, pero esto parece resolverse utilizando overflow:hidden. Lo mejor es probar en cada caso, y si funciona utilizarlo. Si no lo hace y no queda otro remedio se puede utilizar alguna de las soluciones indicadas en el post de SitePoint.

Actualización
Se ha publicado una página con una explicación detallada sobre esta solución en Quirksmode, aunque el ejemplo que muestra se basa en dos capas independientes, una para un menú y otra para el contenido por ejemplo.