La configuración: Un contenedor (div) elástico con otro div flotado dentro, y con contenido a lo largo de ese float. Todo perfecto, hasta que lo ves en IE6, como siempre. "¡Pero bueno! ¿dónde está mi contenido!?" Refrescas la página, y nada, que no aparece por ningún lado. De casualidad te das cuenta que si haces scroll hacia abajo o te cambias de ventana, aparece ahí tan tranquilo.

La demostración: El div#floatholder (con borde punteado) esta dimensionado horizontalmente por márgenes, y verticalmente por contenido. El div#float (con borde gordo marrón) esta flotado a la izquierda, y tiene un enlace de prueba. A continuación hay varias líneas de texto de relleno, alternando con divs con más texto y enlaces de prueba. Lo siguiente es un div con "clear" (con borde morado) para limpiar el flujo y luego otro div para comprobar cuando se activa el bug.

Los bugs: Este "agradable y divertido" efecto puede manifestarse en un número muy grande de contextos distintos. Nos gustaría listarlos todos aquí, de verdad que sí, pero no es algo que un estómago equilibrado pueda soportar fácilmente, asi que igual lo dejamos para otro momento.

Fiesta con los enlaces: Prueba a hacer clic en los enlaces. ¿Curioso eh? Hace aparecer el contenido desaparecido, igual que si haces scroll hacia abajo. Si el div flotado es una imagen enlazada, pasa lo mismo. Pero sólo los enlaces dentro de div#floatholder, y antes del div con "clear" harán aparecer el contenido. Prueba el último enlace en la zona del contenido, ya verás que divertido...

Notas especiales: Si hay múltiples repeticiones del div de contenido que tiene los elementos que activan el bug la cosa puede acabar en algo especialmente raro. Como se discutió en css-d, parece que el bug se activa por el div con el clear. Cuando se fuerza a limpiar algo flotado, el contenido previo después del float se cubre no se sabe muy bien como, quizás por el fondo que tiene div#floatholder (con borde punteado).

Y para acabar, este bug puede aparecer incluso si div#float precede a div#floatholder, ¡siempre que este float externo realmente toque el div con el clear dentro de div#floatholder! Molan los floats eh...

Las soluciones: Hay tres formas que se conozcan para prevenir este bug.

1. Evitar que el div con el clear toque el float, o evitar usar background en div#floatholder. No es la solución ideal, ya...
2. Dar a div#floatholder un "width" o "height" específico. Solución también bastante restrictiva.
3. Dar a ambos divs, div#floatholder y div#float, el valor "position:relative;". Asegúrate de comprobar a fondo esta solución antes de usarla como definitiva.

Actualización (4 Sep, 03): ¡Matthew Sommerville ha descubierto otra solución para el Peekaboo bug! Parece que si al contenedor que tiene el float se le da un valor de "line-height" (cualquier valor) el bug desaparece. Moola. Probando parece que "line-height: 1.2;" funciona en general bien, pero en el caso de elementos hijo con diferentes tamaños de letra, puede que sea necesario darles también su propio valor de "line-height" para evitar (más) problemas en IE. Gracias, Matt. (y para Mikko Rantalainen también, por apuntar que "line-height" NO necesita una unidad en el valor)

Actualización de nuevo (22 Ene, 04): El Peekaboo bug es otro de esos errores del culebrón "IE y los floats" que parece rendirse ante el nuevo Holly hack, detallado en esta página. Al revés que las soluciones antes propuestas, esta no tiene efectos secundarios que se conozcan. Nada más aplicar el Holly hack al elemento que contiene el float comprometedor y fin de la historia.