Comment résoudre le problème d'effondrement en hauteur en HTML

Ce chapitre vous présentera comment résoudre le problème de l'effondrement de la hauteur en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Le problème de l'effondrement en hauteur :
Lorsque le BFC d'un élément est activé, l'élément aura les caractéristiques suivantes :

1 Élément parent Les marges verticales ne chevaucheront pas les éléments enfants
Les éléments avec BFC activé ne seront pas couverts par des éléments flottants
Les éléments avec BFC activé peuvent contenir des éléments enfants flottants

Alors, comment ouvrir l'élément BFC ?
Définissez l'élément sur float
Définissez l'élément sur la position absolue
Définissez l'élément sur inline-block

float:left (bad) Bien que l'élément parent puisse être étiré , la largeur de l'élément parent sera perdue et l'utilisation de cette méthode fera monter les éléments inférieurs.

display:inlink-block; La mise en page est prête, mais la largeur a disparu. Cependant, cela entraînerait une perte de largeur, cette méthode n’est donc pas recommandée.

Définissez la valeur non visible de l'élément overflow :
overflow:auto; Résolvez l'effondrement de la hauteur de l'élément parent avec un minimum d'effets secondaires.

Compatibilité

Il n'y a pas de BFC dans IE6, mais il existe un autre attribut implicite appelé hasLayout.
Cet attribut a une fonction similaire à BFC et est disponible dans IE6 Le navigateur résout le problème en activant hasLayout.

Méthode :
Définir le zoom de l'élément sur 1 : zoom:1

Dans IE6, si une largeur est spécifiée pour un élément, elle sera activée par défaut

hasLayout.

clear : les deux effacent le flotteur de l'élément qui a le plus grand impact

Solution 2 pour résoudre un effondrement élevé

Vous pouvez ajouter un div vide
directement à la fin de l'élément parent réduit. Puisque ce div ne flotte pas, il peut augmenter la hauteur de l'élément parent
puis effacer le flottant, donc. que vous pouvez utiliser ce div vierge pour augmenter la hauteur de l'élément parent n'a pratiquement aucun effet secondaire
Bien que cela puisse résoudre le problème, cela ajoute une structure redondante à la page.

Utilisez la pseudo-classe after pour la définir comme élément de niveau bloc et effacez les flotteurs des deux côtés pour résoudre le problème de l'effondrement de la classe parent
Grâce à la pseudo-classe after classe, sélectionnez le dos de box1

.box1:after{
         content:"";
         display:block;
         //清除两侧的浮动
         clear:both;
}
 /* IE6不支持伪类。  zoom:1;*/
.clearfix:after{
         /*添加一个内容*/
         content:"";
         /*转换为一个块元素*/
         display:block;
         /*清除两侧的浮动*/
         clear:both;
     }
 /*在IE6中不支持after伪类，
     所以在IE6中还需要使用hasLayout来处理*/

     .clearfix{
         zoom:1;
     }

Dans IE6, si l'élément ci-dessus est un élément en ligne, il ne flottera pas

Version ultime :

//Le clearfix modifié est multifonctionnel

//Il peut non seulement résoudre l'effondrement en hauteur, mais également garantir que les marges verticales de l'élément parent
et de l'élément enfant se chevauchent

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!