Forcer un élément flottant ou à position absolue à rester «dans le flux» avec CSS

Question

Je cherche un moyen de forcer les éléments flottants ou absolument positionnés à rester dans le flux en CSS. Je pense que css est stupide de ne pas avoir quelque chose comme: flow: on flow: off pour le garder dans le flux ou l’extraire.

Le problème est que je veux avoir un élément div avec une hauteur variable, une image flottante à gauche dans le div et je veux que le div soit au moins à la hauteur de l’image. Je veux aussi qu'il soit suffisamment grand pour contenir tout le texte IS dans le flux (ce n'est évidemment pas un problème).

J'ai besoin que l’image puisse varier en taille. J'utilise actuellement une solution jQuery, mais sa mise en place. Puisque je n'ai pas envie de déboguer et que je pense qu'il devrait être une sorte de solution CSS, je vous le demande.

Quelqu'un sait comment je peux le faire?

Answer 1

Je vais généralement avec dépassement: masqué ou dépassement: auto .

Answer 2

Au lieu d'utiliser un nouvel élément pour effacer la div à la fin, vous pouvez l'ajouter à la div absolue css;

overflow: auto;

Évidemment IE aime jouer différemment, vous devez donc lui donner une largeur également. Je suppose que la div absolue a une largeur définie ... vous pouvez donc simplement la régler sur cette largeur.

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

Answer 3

Un hack qui peut fonctionner dans votre cas est d'ajouter un autre élément à l'intérieur de votre div après le reste du contenu pour lequel la propriété CSS clear est définie sur "les deux". (ou à gauche, puisque votre image est à gauche). par exemple:

<br style="clear: both" />

Ceci forcera l'élément sous les éléments flottants, ce qui étendra le div qui le contient.