Pourquoi mon conteneur parent n'affiche-t-il pas sa couleur d'arrière-plan lors de l'utilisation d'éléments flottants en CSS ?

Couleur d'arrière-plan et éléments flottants en CSS

Lorsque vous travaillez avec CSS, vous pouvez rencontrer une situation dans laquelle des éléments flottants empêchent le conteneur parent de s'afficher sa couleur de fond. Ce problème se produit car les éléments flottants sont supprimés du flux du document, ce qui entraîne la perte des dimensions définies du parent.

À titre d'exemple, considérons la structure HTML suivante :

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

Avec ce qui suit style :

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

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

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

Dans ce scénario, l'ajout de contenu à l'élément flottant "droit" n'entraînera pas l'expansion verticale du div parent, révélant le rouge background.

Pour résoudre ce problème, vous pouvez utiliser la propriété overflow sur l'élément parent. Définir le débordement sur caché ou sur auto force le parent à contenir ses enfants, permettant ainsi à la couleur d'arrière-plan de s'afficher correctement.

Voici un exemple utilisant le débordement : caché :

.content {
    overflow:hidden;
}

En forçant le élément parent pour contenir ses enfants, le fond rouge est désormais visible, même avec les éléments flottants présents.

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!