qu'est-ce que l'effondrement de la hauteur CSS

Dans le flux de documents, la hauteur de l'élément parent est étirée par défaut par les éléments enfants, c'est-à-dire que la hauteur de l'élément enfant est la même que la hauteur de l'élément parent. Cependant, lorsque l'élément enfant est défini sur flottant, l'élément enfant se détachera complètement du flux de documents. À ce stade, l'élément enfant ne sera pas en mesure de supporter la hauteur de l'élément parent, ce qui entraînera la hauteur de l'élément parent. s'effondrer.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur Dell G3.

Si l'élément parent ne contient que des éléments flottants et que l'élément parent ne définit pas de hauteur ni de largeur, alors sa hauteur s'effondrera à zéro, ce qu'on appelle "l'effondrement de la hauteur".

Si l'élément parent contient un arrière-plan ou une bordure, l'élément débordant ne semble pas faire partie de l'élément parent.

Méthodes pour résoudre le problème de "l'effondrement de la hauteur" :

Option 1 : Donner à l'élément parent une hauteur fixe

Inconvénients : La fixation de la hauteur de l'élément parent viole le principe d'adaptation en hauteur, n'est pas assez flexible et n'est pas recommandée.

Option 2 : Ajouter l'attribut overflow : caché à l'élément parent ;

Avantages : bon support du navigateur, simple ;

Inconvénient : en tant que élément enfant Lorsqu'il y a un attribut de positionnement, définissez overflow : caché ; les parties à l'extérieur du conteneur seront recadrées.

[Tutoriel recommandé : Tutoriel vidéo CSS]

Option 3 : Ajoutez un p vide à la fin de l'élément enfant et définissez le style ci-dessous

div{
clear: both;
height: 0;
overflow: hidden;
}

Avantages : tous les navigateurs le prennent en charge et le débordement de conteneur ne sera pas coupé.
Inconvénients : l'ajout de divs dénués de sens à la page peut facilement entraîner une redondance du code ;

Option 4 : Méthode Universal Clear Float

Ajoutez un pseudo-élément à la fin du contenu dans l'élément parent pour réaliser la fonction de la troisième option spécifique. Le style de réglage est le suivant :

Élément parent :

after{
content: "";
height: 0;
    clear: both;
display: block;
}

Avantages : Cela ne provoquera pas de redondance du code et les performances du code restant sont optimisées.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!