Pourquoi mon conteneur parent a-t-il une hauteur de 0 lorsque je fais flotter ses enfants ?

Confusion du contenu flottant et de la hauteur du conteneur

En CSS, les éléments flottants sont positionnés en dehors du flux normal du document et n'affectent pas la hauteur de leur conteneur parent. Ce comportement peut sembler contre-intuitif, surtout lorsque la page s'affiche correctement.

Comprendre 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%;
}

Lorsqu'un Une structure HTML comme celle-ci est créée :

<div>

La page s'affichera correctement, mais après inspection, le parent div#wrapper affichera une hauteur de 0px. Cela se produit parce que le contenu flottant, comme .content et .lbar, est supprimé du flux normal et occupe des positions en dehors de tout contenu de bloc.

Résoudre le problème de hauteur

Pour garantir que le conteneur parent s'étende jusqu'à la hauteur de son contenu flottant, il existe deux techniques principales :

• Débordement : Caché :Définir le débordement : caché sur l'élément conteneur établit un nouveau contexte de formatage de bloc, qui oblige le conteneur à prendre en compte la hauteur de son enfant flottant.
• Contenant des flotteurs : Il existe d'autres méthodes pour contenir des flotteurs, telles que l'utilisation de blocs en ligne, de pseudo-éléments et l'emballage des éléments flottants dans un autre conteneur.

Comprendre cet aspect de la mise en page CSS est crucial pour créer des pages Web avec un dimensionnement et un flux précis.

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!