Comment puis-je obtenir un div pour envelopper les enfants flottants?

Question

Considérant le code suivant, où les éléments span flottent à l'intérieur du div, comment puis-je faire le div enrouler autour des éléments enfants flottants, de sorte que la bordure 1px enveloppe les éléments enfants?

<div style="border:1px solid #000"> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
</div> 

Answer 1

La plupart du temps, l'ajout overflow:hidden sur l'emballage est suffisante:

<div style="border:1px solid #000; overflow:hidden;"> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
</div> 

Parfois, vous verrez cette autre approche (qui est beaucoup plus hacky, mais a sans doute mieux revenir version support du navigateur).

<div style="border:1px solid #000; "> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <span style="float:left">Content</span> 
    <div style="clear:both;"></div> 
</div> 

Answer 2

Utilisez le clairCSS propriété selon docs web MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Note: Si un élément ne contient que des éléments flottaient, sa hauteur se réduit à rien. Si vous voulez qu'il soit toujours capable de redimensionner, afin qu'il contienne des éléments flottants à l'intérieur, vous devez auto-effacer ses enfants. Ceci est appelé clearfix, et une façon de le faire est effacer un remplacé après pseudo-élément dessus.

#container::after { 
    content: ""; 
    display: block; 
    clear: both; 
}