Méthode pour effacer le flottant : 1. Définissez la hauteur dans le div parent avec la syntaxe "height: height" 2. Ajoutez un div vide à la fin et définissez le style "clear:both" ; la pseudo-classe dans le div parent ":after" et zoom ; 4. Le div parent définit "overflow:hidden".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Flottant fera flotter l'étiquette actuelle vers le haut et affectera également la position des étiquettes avant et arrière, l'étiquette parent et l'attribut largeur hauteur.
Et le même code peut s'afficher différemment dans différents navigateurs, ce qui rend la suppression des flottants plus difficile.
Il existe de nombreuses façons de résoudre les problèmes causés par le flottement, mais certaines méthodes ont des problèmes de compatibilité avec les navigateurs.
1. Hauteur de définition du div parent
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
Principe : Définir manuellement la hauteur du div parent pour résoudre le problème. problème Le div parent ne peut pas obtenir automatiquement la hauteur.
Avantages : simple, moins de code, facile à maîtriser
Inconvénients : convient uniquement aux mises en page à hauteur fixe. Pour donner une hauteur précise, des problèmes surviendront si la hauteur est différente de celle du div parent. .
2. Ajoutez une balise div vide à la fin clear:both
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
Principe : ajoutez un div vide, utilisez clear:both amélioré par css pour effacer le. flotter et laisser le parent Le div peut obtenir automatiquement la hauteur
Avantages : Simple, moins de code, bon support du navigateur, pas sujet à des problèmes étranges
Inconvénients : De nombreux débutants ne comprennent pas le principe ; si la page a de nombreuses mises en page flottantes, il est nécessaire d'ajouter beaucoup de divs vides, ce qui met les gens très mal à l'aise
Pseudo-classe de définition de div parent : après et zoom<. 🎜>
1 2 3 4 5 6 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
4. Débordement de définition du div parent : caché
1 2 3 4 5 |
|
, parcourir Le navigateur vérifiera automatiquement la hauteur de la zone flottanteoverflow:hidden
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!