Maison > Article > interface Web > Quelles sont les méthodes pour effacer les flottants en CSS ?
Quelles sont les méthodes pour effacer les flottants en CSS ?
- 零下一度original
- 2017-06-30 10:47:131340parcourir
Flottant ---- fera flotter l'étiquette actuelle, provoquant l'effondrement de la hauteur de l'étiquette parent
Spécifiez une hauteur pour l'élément parent.
Simple et brut ! La hauteur est variable. Si la hauteur interne est supérieure à celle du parent, des problèmes peuvent facilement survenir
2 Ajoutez des balises supplémentaires après l'élément flottant
<. 🎜>
peuvent également être
Des balises vides seront générées, provoquant une confusion dans le code et des difficultés de maintenance, et le code est très intuitif. Pas bon3. Ajoutez le style overflow:hidden;zoom:1 ou overflow:hidden;width:98% à la balise parent
Zoom:1 est ajouté pour être compatible avec IE6. Il doit y en avoir un pour le zoom et la largeur, mais la valeur de hauteur ne peut pas être définie. Le navigateur peut obtenir automatiquement la hauteur. zone flottante,
et ne peut pas être utilisée avec position , car cela entraînerait des problèmes cachés au-delà de la taille.
4. Définissez overflow:auto pour la balise parent
C'est fondamentalement la même chose que 3, le seul Le problème que cela provoque est que si lorsque la hauteur interne est supérieure au niveau parent, un rouleau apparaîtra
5 Ajoutez un flotteur à l'élément parent, et ils deviendront un bloc flottant entier.
Provoquera de nouveaux problèmes de flottement
Ajouter un affichage : table à la balise parent style="display:table; zoom:1">
< ;/div>
< ;div style="position:absolute; zoom:1">Le principe est similaire à celui de 5. L'élément parent est séparé du flux de texte d'origine. Les problèmes résultants peuvent être similaires et peuvent toujours être résolus en utilisant cette méthode .
8. Donnez à la pseudo-classe de définition de la balise parent : after, et zoom:1 .clearfix:after {display:block; ; contenu :"" visibilité : caché ; hauteur :0} .clearfix {zoom:1};
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!