Selon la spécification CSS, les flottants sont déplacés hors du flux de documents et n'affectent pas la disposition des zones de bloc mais uniquement la disposition des zones en ligne (généralement du texte). Par conséquent, lorsque sa hauteur dépasse le conteneur conteneur, le conteneur parent général ne s'étire pas automatiquement pour fermer l'élément flottant. Mais parfois, nous avons besoin de ce comportement de fermeture automatique. Comment y faire face ?
Une façon de procéder consiste à insérer une étiquette supplémentaire dans le conteneur parent et à indiquer clairement qu'il faut développer le conteneur parent. Cette méthode a une bonne compatibilité avec les navigateurs et ne pose aucun problème. L'inconvénient est qu'elle nécessite des balises supplémentaires (et généralement sémantiquement non sémantiques), donc personnellement, je ne l'aime pas.
Plus tard, il y a eu une nouvelle façon d'utiliser la pseudo-classe :after pour intégrer dynamiquement un élément pour effacer les flottants. Cette méthode a le même principe que la précédente, sauf que le contenu supplémentaire est généré avec CSS, mais considérez qu'IE ne l'a pas fait. support :après et j'ai dû faire beaucoup de hacks. Cette méthode a une compatibilité générale, mais elle peut gérer différents navigateurs via divers hacks. En même temps, elle peut garantir que le code HTML est relativement propre, il est donc toujours utilisé plus souvent.
Plus tard, quelqu'un a découvert que définir le débordement du conteneur parent sur une valeur autre que visible peut fermer l'élément flottant dans un navigateur conforme aux normes. Naturellement, IE ne le prend pas en charge, cette méthode est donc aussi valide que la méthode précédente. effectue un traitement différent (en particulier le déclenchement de la mise en page). La différence est que le débordement n'est pas aussi gênant que la pseudo-classe :after. Il présente également des défauts.
Avant d'utiliser le débordement, il existait une autre façon d'utiliser float, qui consiste à faire flotter le conteneur parent. Cela profite d'une caractéristique des éléments flottants : les éléments flottants fermeront les éléments flottants. Cette méthode donne de bons résultats dans IE/Win et dans les navigateurs compatibles avec les standards, mais l'inconvénient est également évident : le conteneur parent peut ne pas flotter simplement parce qu'il veut flotter. Après tout, le flottement est un comportement spécial, et parfois la mise en page ne l'est pas. correct. Le laisser flotter est également normal. Bien que les éléments float puissent être fermés dans IE et les navigateurs conformes aux normes, le principe est différent dans IE/Win, float déclenche la mise en page et ferme donc le float dans les navigateurs conformes aux normes, float est en fait le même que le précédent. Le principe de débordement dans cette méthode est le même, ce qui entraîne une "plage de formatage au niveau du bloc" - c'est un phénomène mentionné dans la spécification CSS. Elle a souvent une certaine indépendance. L'une de ses caractéristiques est qu'elle ferme automatiquement le flottant interne. . élément.
Par spécification, les types d'éléments suivants génèrent une étendue de formatage au niveau du bloc :
● Les éléments flottants peuvent être à gauche ou à droite.
● Eléments positionnés de manière absolue.
● Élément Inline-block, mais ce gecko ne le prend pas en charge actuellement.
● les éléments de type table-cell En fait, table, table-head-group, table-row, etc. sont également acceptables, ainsi que inline-table (non pris en charge par gecko), car ils génèrent tous indirectement un tableau anonyme. cellule.
● Overflow est un élément dont la valeur n'est pas visible.
Par conséquent, il s'avère que dans les navigateurs conformes aux normes, nous pouvons également avoir autant de méthodes pour fermer un élément flottant, et seul CSS est nécessaire, rien d'autre n'est nécessaire. À propos, en plus du débordement, ce qui précède a pour effet supplémentaire de réduire automatiquement la largeur du conteneur parent.
Pour IE/Win, il possède son propre système, qui est la mise en page. Les éléments avec mise en page fermeront automatiquement les éléments flottants. Jetons un coup d'œil aux propriétés CSS qui déclenchent la mise en page. Vous constaterez qu'il existe de nombreuses similitudes avec le formatage au niveau du bloc. gamme ci-dessus :
● Éléments flottants ● Éléments positionnés de manière absolue ● display:inline-block
● zoomer
● largeur/hauteur
● overflow/overflow-x/overflow-y [Nouveau dans IE7]
● largeur/hauteur max/min [Nouveau dans IE7]
D'après ce qui précède, il existe de nombreuses façons de fermer des éléments flottants dans IE, et naturellement elles ont toutes leurs limites. Soit elles ont des effets secondaires, soit elles utilisent des attributs non standard (qui ne peuvent pas passer la vérification).
Une autre chose à mentionner est display:inline-block. Cet attribut en lui-même n'est d'aucune utilité pour IE. L'effet réel est simplement d'ajouter secrètement une mise en page à un élément. Cependant, les navigateurs conformes aux normes reconnaissent cet attribut, il ne les affecte donc pas. Pour le navigateur, vous devez rétablir l'affichage par défaut. Il y a un bug dans IE ici. Si vous définissez d'abord display:inline-block, puis redéfinissez l'affichage sur block (ces deux affichages doivent être placés l'un après l'autre dans deux instructions CSS pour avoir un effet), alors la mise en page sera ne disparaîtra pas, et en même temps, la mise en page ne disparaîtra pas. Cela n'affectera pas les autres navigateurs, donc pour l'instant, c'est aussi un bon moyen de déclencher la mise en page :
| .gainlayout{display:inline-block;} .gainlayout{affichage:bloc;} |
Par conséquent, il existe de nombreuses façons de fermer les éléments flottants dans les navigateurs. Comment utiliser ces propriétés CSS ensemble nécessite une analyse détaillée de la situation spécifique. Il est également nécessaire d'appliquer de manière flexible des commentaires conditionnels. Si cela ne fonctionne vraiment pas, nous pouvons y aller. revenir en arrière et utiliser clear. Il peut être utilisé.