élément Floated non inclus dans le parent, ce qui provoque des problèmes de marge inférieure

Question

droit, donc j'ai une section d'une page:

<div class="article"> 
    <div class="author"> 
     <img src="images/officers/john_q_public_thm.jpg" /> 
     <span class="name">John Q. Public</span> 
     <span class="position">President</span> 
    </div> 
    <abbr class="postdate"> 
     <span class="month m-01">Jan</span> 
     <span class="day d-31">31</span> 
     <span class="year y-2009">2009</span> 
    </abbr> 
    <div class="content"> 
       <h2 class="title">Article Title</h2> 
       <p>Pellentesque habitant morbi...facilisis luctus, metus</p> 
       <p>Pellentesque habitant morbi...facilisis luctus, metus</p> 
    </div> 
</div> 
<div class="article">...</div> 
<div class="article">...</div> 

Les author et abbr divs sont flottaient à la gauche. Chacun de ces divs article doit être séparé de ses frères et sœurs par 5px environ. Cependant, le div author s'étend au-delà de la "hauteur" technique de la div. Le margin-bottom ne fait rien, car l'espace est occupé par le flottant author.

Ceci est quelque peu difficile à imaginer, donc je l'ai placé sur .

Existe-t-il un moyen de forcer le parent à être au moins aussi grand que tous les éléments flottants à l'intérieur?

Si quelqu'un découvre ce que je dis, merci.

Answer 1

Vous pouvez mettre cela en bas/à l'intérieur de la div.article (juste avant la fermeture de la div)

<div style="clear:both;"></div> 

Ou ceci:

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ 

Answer 2

Vous devez ajouter un élément de compensation après vos éléments flottants. Quelque chose comme ça fonctionne habituellement <br clear="both"/> qui effacera les flotteurs gauche et droit et "pad out" votre élément contenant.

Vous pouvez spécifier both, left et right qui effacent tous les éléments flottants, flottant à gauche et flottant à droite en conséquence.

Answer 3

En plus des hacks ci-dessus, vous pouvez définir overflow:auto; sur les divs article, bien que cela puisse avoir des effets secondaires en fonction des autres règles que vous avez sur ces divs. Mais cela vous empêche d'ajouter des éléments au HTML.