Bref dans cet example, ça va chier si ton image est plus haute que ton texte, a ce moment là ton image va déborder du bord de ton cadre.
Ok, j'ai compris ce que tu voulais faire. Certes, il faut bricoler, mais le comportement que tu décris de float est tout à fait normal et conforme aux spécifications. Float, ça retire du flux la boite sur lequel il est appliqué. c'est donc normal que la boite jaune ne prenne pas la hauteur de celle flottante, puisque cette dernière n'est plus contenue "visuellement" dans la boite jaune.
Bref, ce n'est pas "une merde" comme tu dis, c'est juste que le float de CSS2 ne correspond pas à tes besoins.
[^] # Re: Css3 et marcher sur la tête...
Posté par Laurent J (site web personnel, Mastodon) . En réponse à la dépêche Apple, Opera et Mozilla poussent HTML5. Évalué à 2.
Ok, j'ai compris ce que tu voulais faire. Certes, il faut bricoler, mais le comportement que tu décris de float est tout à fait normal et conforme aux spécifications. Float, ça retire du flux la boite sur lequel il est appliqué. c'est donc normal que la boite jaune ne prenne pas la hauteur de celle flottante, puisque cette dernière n'est plus contenue "visuellement" dans la boite jaune.
Bref, ce n'est pas "une merde" comme tu dis, c'est juste que le float de CSS2 ne correspond pas à tes besoins.
Heureusement, dans CSS3, ils sont en train de réflechir pour prendre en compte le cas que tu décris, avec la propriété clear-after : http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-clear-af(...) Par exemple, il suffira de mettre dans ta div article :
<div class="article" style="background: yellow; clear-after:left;" >
plus besoin de ta div hidden.