Le flottement clair est quelque chose que tous ceux qui créent des pages rencontreront, mais tout le monde peut-il le savoir clairement et le comprendre de manière globale ? J'ai donc écrit un article comme celui-ci dès que j'avais du temps libre. Je ne peux pas tout couvrir, mais je peux en gros enseigner à tout le monde ce que je sais.
Jetons un coup d'œil au nombre de méthodes disponibles pour effacer les flottants (je n'écrirai pas sur l'utilisation de zoom:1 dans IE, mais j'en parlerai dans la rubrique suivante). DÉMO correspondante
- Utilisez la pseudo-class:after pour effacer la couche de pseudo-classe avec une hauteur de zéro pour un contrôle vide ultérieur.
- Utilisez CSS overflow:auto pour prendre en charge la hauteur
- Utiliser CSS overflow:hidden pour produire des adaptations étranges
- Utilisez display:table pour transformer l'objet en forme de tableau
- Utilisez la balise div et l'attribut clear de CSS
- Utilisez la balise br et l'attribut clear de CSS
- Utilisez la balise br et son propre attribut HTML clear
À première vue, ils peuvent tous deux résoudre le problème, mais ils ont leurs propres avantages et inconvénients. (correspondance individuelle)
- La sémantique de la structure des avantages est tout à fait correcte et aucun autre problème étrange ne surviendra.
Inconvénients Des méthodes de réutilisation inappropriées peuvent facilement conduire à une forte augmentation du volume de code.
Il est recommandé de l'utiliser lorsque la couche la plus externe flotte légèrement ou pour les personnes qui comprennent la méthode de réutilisation modulaire. - Avantages : La sémantique de la structure est tout à fait correcte et la quantité de code est très faible.
Inconvénients : Après plusieurs imbrications, cliquer sur la boîte flottante claire la plus externe entraînera la sélection de tout le contenu du calque le plus externe au calque le plus interne (FF) ou lorsque le survol de la souris provoque un changement de largeur, le module le plus externe aura un défilement ; barre (IE).
Il est recommandé d'utiliser le module dans un seul module, de ne pas l'imbriquer. - Avantages : La sémantique de la structure est tout à fait correcte et la quantité de code est très faible.
Inconvénients : lorsque le contenu augmente, il est facile de renvoyer automatiquement les lignes à la ligne et le contenu est masqué.
Il est recommandé de l'utiliser lorsque la largeur est fixe et de ne pas s'emboîter. - Avantages : La sémantique de la structure est tout à fait correcte et la quantité de code est très faible.
Les propriétés du modèle de boîte à lacunes ont changé. Il est concevable qu’il y ait plus d’événements étranges que vous ne pouvez en compter.
Il est recommandé que si vous ne voulez pas corriger le bug et vous tuer, il est préférable de ne pas l'utiliser, cependant, il peut être utilisé comme une tromperie temporaire dans la version alpha à des fins de test ; - Avantages : La quantité de code est très faible et la réutilisabilité est extrêmement élevée.
L’inconvénient est qu’il ne peut pas s’adapter parfaitement à la sémantique et n’est pas propice aux révisions et aux changements de demande.
Recommandé aux débutants, il permet de résoudre rapidement des problèmes flottants. - Avantages : Le degré de sémantique est meilleur que celui du cinquième cas ; la quantité de code est très faible et la réutilisabilité est extrêmement élevée.
Inconvénients : La sémantique n’est pas encore parfaite, ce qui n’est pas propice aux révisions et aux changements de demande.
Recommandé aux débutants, il permet de résoudre rapidement des problèmes flottants. - Avantages : Le degré de sémantique est meilleur que celui des cas 5 et 6 ; la quantité de code est minime et la réutilisabilité est extrêmement élevée.
Inconvénients : La sémantique n’est pas encore parfaite, ce qui n’est pas propice aux révisions et aux changements de demande.
Il est recommandé de guider les débutants dans leur utilisation lors de la mise à niveau de leur réflexion, afin qu'ils comprennent qu'au lieu d'utiliser le nom de classe pour contrôler une performance, il est préférable de revenir à l'ère WEB1.0 des pages Web et d'utiliser directement les attributs HTML pour contrôler les performances. Après tout, ce dernier a moins de code.
Enfin, la liste est complète. Cependant, je pense qu'il est nécessaire de m'excuser auprès de tout le monde pour l'article que j'ai réimprimé sur Ghost ; je regrette beaucoup d'avoir changé le titre de Ghost de "le plus simple" à "optimal", ce qui a ensuite induit en erreur de nombreux étudiants. J'ai donc réécrit un article à partager avec vous.
Texte original : http://webteam.tencent.com/?p=1122
