communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Pourquoi un élément flottant empêche-t-il l'affichage complet de l'arrière-plan d'un conteneur parent et comment cela peut-il être corrigé ?

Pourquoi un élément flottant empêche-t-il l'affichage complet de l'arrière-plan d'un conteneur parent et comment cela peut-il être corrigé ?

Susan Sarandon

Libérer： 2024-11-29 07:27:10

original

949 Les gens l'ont consulté

Why Does a Floated Element Prevent a Parent Container's Background from Fully Showing, and How Can This Be Fixed?

L'élément flottant a un impact sur la couverture des couleurs d'arrière-plan

En HTML, les éléments flottants peuvent perturber la couverture des couleurs d'arrière-plan du conteneur parent. Lorsqu'un élément conteneur possède des éléments enfants dotés de propriétés float, les éléments enfants sont supprimés du flux de documents normal. Cela peut entraîner l'effondrement de l'élément parent sur lui-même, ce qui obscurcit sa couleur d'arrière-plan.

Pour résoudre ce problème dans le scénario fourni :

<br><div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Copier après la connexion

Avec le CSS suivant :

<br>.content {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;

Copier après la connexion

}

.gauche {

 float: left;
 height: 300px;
 background: green;

Copier après la connexion

}

.droite {

 float: right;
 background: yellow;

Copier après la connexion

}

Le résultat souhaité est que la couleur de fond rouge couvre toute la hauteur de la division ".content". Cependant, lorsque le div ".right" est rempli avec du contenu, il ne parvient pas à augmenter la hauteur de son conteneur parent, ce qui rend l'arrière-plan rouge incomplet.

La résolution réside dans l'application de la propriété "overflow: Hidden" à l'élément ".content":

<br>.content {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: hidden;

Copier après la connexion

}

En définissant "overflow : caché", le div ".content" est forcé de contenir ses éléments enfants flottants, l'empêchant de s'effondrer. En conséquence, le fond rouge englobe désormais toute la hauteur du div ".content", comme prévu.

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!

source：php.cn

Article précédent：Comment puis-je styliser de manière fiable le dernier élément de la liste dans tous les navigateurs ? Article suivant：Comment puis-je personnaliser dynamiquement les paramètres d'animation CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2055

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2211

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1865

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...