Pourquoi un conteneur avec des enfants flottants a-t-il une hauteur nulle ?

Comprendre la hauteur du conteneur avec des enfants flottants

Lorsque vous travaillez avec CSS, vous pouvez rencontrer une situation dans laquelle un conteneur parent avec des enfants flottants se retrouve avec une hauteur nulle. Ce comportement peut prêter à confusion, étant donné que les enfants occupent de l'espace à l'intérieur du conteneur.

Le problème

Considérez le CSS suivant :

#wrapper {
  width: 75%;
  min-width: 800px;
}
.content {
  text-align: justify;
  float: right;
  width: 90%;
}
.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

Si vous utilisez ce CSS avec le HTML suivant :

<div>

La page s'affichera correctement. Cependant, si vous inspectez les éléments, vous remarquerez que le div#wrapper est affiché avec une hauteur de 0 px.

Pourquoi cela se produit

Le contenu flottant ne le fait pas. influencer la hauteur de son conteneur. Dans ce cas, les éléments .content et .lbar sont flottants et sont donc supprimés du flux normal du document. Par conséquent, le conteneur ne contient aucun contenu non flottant. Cela permet à la hauteur du conteneur de s'effondrer jusqu'à zéro, comme s'il était vide.

Solutions

Pour résoudre ce problème, vous pouvez utiliser les méthodes suivantes :

• overflow : caché : La définition de cette propriété sur le conteneur empêchera le contenu de déborder en dehors de ses limites. Cela établit un nouveau contexte de formatage de bloc, qui oblige le conteneur à se développer pour accueillir ses enfants flottants.
• Contenant des flotteurs : D'autres techniques pour contenir des flotteurs incluent l'utilisation de la propriété clear ou l'ajout d'un div vide. avec clair : les deux ; à la fin du conteneur.

Comprendre ce comportement des flotteurs est essentiel pour créer des mises en page avec CSS. En employant les techniques appropriées, vous pouvez vous assurer que vos conteneurs ont la hauteur souhaitée et que les éléments de votre page sont correctement positionnés.

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!