Pourquoi une division parent s'effondre-t-elle à une hauteur nulle lorsqu'elle contient des enfants flottants ?

L'énigme du parent à hauteur nulle : enfants flottants et hauteurs de conteneurs

Dans le domaine de la conception Web, rencontrer des comportements particuliers en CSS le style peut être déroutant. Une de ces énigmes survient lorsque la hauteur d'un div parent diminue mystérieusement jusqu'à zéro malgré la présence d'éléments enfants flottants. Pour percer ce mystère, explorons le code CSS et HTML :

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

<div>
<p>Une fois ces styles appliqués, la page s'affiche correctement. Cependant, en inspectant les éléments, une observation particulière émerge : le div parent, #wrapper, présente une hauteur de 0px malgré la présence de divs enfants flottants. Ce comportement soulève la question : pourquoi la hauteur du div parent disparaît-elle ?</p>
<p>La réponse réside dans la nature inhérente des éléments flottants en CSS. Le contenu flottant est essentiellement supprimé du flux de documents normal, occupant une place en dehors de la mise en page normale. De ce fait, la hauteur du conteneur est déterminée uniquement par son contenu non flottant. Dans ce cas, puisque tout le contenu de #wrapper flotte, la hauteur du conteneur s'effondre à zéro.</p>
<p>Pour remédier à ce problème, plusieurs techniques peuvent être utilisées :</p>
<ul>
<li>
<strong>Débordement : Hidden:</strong> En définissant overflow: Hidden sur le div parent, un nouveau contexte de formatage de bloc est créé. Cela force efficacement les éléments enfants flottants à contribuer à la hauteur du conteneur.</li>
<li>
<strong>Contenant des flotteurs :</strong> Il existe diverses méthodes pour contenir des éléments flottants, garantissant que la hauteur du conteneur parent s'étend de manière appropriée. Celles-ci incluent l'utilisation de pseudo-éléments, de boîtes flexibles CSS3 ou de dispositions de grille.</li>
</ul>
<p>En comprenant le comportement des éléments flottants et en mettant en œuvre des techniques de confinement appropriées, les développeurs peuvent empêcher le phénomène confondant de div parent de hauteur nulle et garder le contrôle. sur leurs mises en page.</p>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!