Comment empêcher l'arrière-plan CSS de masquer le contenu lors de l'utilisation d'éléments flottants ?

Couleur de fond CSS avec éléments flottants

Considérez le code HTML suivant :

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</div>

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</div>

Et le CSS correspondant :

 .content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

 .left {
     float: left;
     height: 300px;
     background: green;
 }

 .right {
     float: right;
     background: yellow;
 }

Lors de l'ajout de contenu à .right, le div .content parent ne parvient pas à s'étirer pour s'adapter à la taille de son enfant, ce qui entraîne un rouge invisible arrière-plan couvrant la zone développée.

Comprendre le problème

Les éléments flottants, comme .left et .right dans ce cas, sont supprimés du flux normal du document. Cela a un impact sur l'élément parent, car il n'a plus de hauteur définie car les enfants n'occupent pas d'espace physique. Par conséquent, l'élément parent s'effondre sur lui-même.

Solution : Conserver les dimensions de la boîte

Pour remédier à ce problème, il est nécessaire de forcer l'élément parent à conserver ses dimensions malgré les éléments enfants flottants. Ceci peut être réalisé en ajoutant overflow: Hidden à .content.

.content {
    overflow: hidden;
}

Alternativement, overflow: auto peut être utilisé, offrant une fonctionnalité similaire tout en vous permettant d'identifier les écarts de hauteur.

Ceci la modification garantit que .content encapsule ses enfants flottants, résolvant ainsi le problème du fond rouge tronqué.

Alternative : Clearfix

Pour les navigateurs avec une prise en charge limitée, l'utilisation d'un hack clearfix peut résoudre ce problème. Cependant, cette approche n'est pas recommandée pour la compatibilité des navigateurs modernes.

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!