Forzar un elemento flotante o de posición absoluta para permanecer "en el flujo" con CSS

Question

Estoy buscando una forma de forzar a los elementos flotantes o posicionados absolutamente a permanecer en el flujo en css. Estoy bastante pensando que css es estúpido por no tener algo como flujo: on flow: off para mantenerlo en el flujo o sacarlo.

El problema es que quiero tener un elemento div con una altura variable, tengo una imagen flotante a la izquierda en el div, y quiero que el div tenga al menos la altura de la imagen. También quiero que sea al menos lo suficientemente grande como para contener todo el texto que ESTÁ en el flujo (esto obviamente no es un problema).

Necesito que la imagen pueda variar en tamaño. Actualmente estoy usando una solución jQuery, pero está actuando. Como no tengo ganas de depurar, y siento que debería haber algún tipo de solución CSS, estoy preguntando.

¿Alguien sabe cómo puedo hacer esto?

Answer 1

Normalmente uso el desbordamiento : oculto o el desbordamiento : auto .

Answer 2

En lugar de utilizar un nuevo elemento para borrar el div al final, puede agregar esto al div css absoluto;

overflow: auto;

Obviamente A IE le gusta jugar de manera diferente, por lo que también debe proporcionarle un ancho. Supongo que el div absoluto tiene un ancho establecido ... por lo que puede establecerlo en ese ancho.

.abs-div {
    position: absolute;
    overflow: auto;
    width: 160px; /* Replace with your width */
}

Answer 3

Un truco que puede funcionar en su situación es agregar otro elemento dentro de su div después del resto del contenido que tiene la propiedad de limpieza CSS establecida en '' ambos '' (o izquierda, ya que su imagen está a la izquierda). por ejemplo:

<br style="clear: both" />

Esto forzará al elemento debajo de los elementos flotantes, lo que estirará el div que contiene.