Comment débordement: les travaux cachés permettent d'envelopper les éléments flottants?

Question

Je suis un peu confus quand utiliser overflow: caché pour s'assurer que l'élément parent enveloppe d'autres éléments. J'ai toujours utilisé le clair: les deux; div pour faire cela, mais cela n'a pas beaucoup de sens sémantiquement. Quelqu'un peut-il expliquer comment débordement: div parent caché fait-il de la magie? Et quand devrions-nous préférer cette technique au clair: les deux méthodes?

À la votre!

Answer 1

Un débordement de tout sauf visible crée un nouveau contexte de formatage de bloc qui efface les flottants.

Answer 2

Lorsque nous utilisons float: left, le problème qui est quand il y a suffisamment d'espace pour le prochain élément, il viendra à côté de l'élément flottant pour éviter que nous utilisons clairement: les deux

par exemple:

<style> 
#wrapper{ 
width:500px; 
} 

#one{ 
width:100px; 
float:left; 
} 

#two{ 
width:100px; 
float:left; 
} 

#three{ 
width:100px; 
} 

.clearfix{ 
clear:both; 
} 

</style> 


<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div> 

Dans la situation ci-dessus, il y a en tout 500px d'espace, deux divs ont pris 200px, il y a 300px d'espace et dv trois est juste 100 px. Alors div trois ira à côté de div deux car il y a assez d'espace. Pour éviter cela, il suffit de mettre un div avec clear: les deux après div deux

<div id="wrapper"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div class="clearfix"></div> 
    <div id="three"></div> 
</div>