Quelles sont les méthodes pour effacer les flottants en CSS ?-tutoriel HTML-php.cn

Quelles sont les méthodes pour effacer les flottants en CSS ?

零下一度

Libérer： 2017-06-30 10:47:13

original

1368 Les gens l'ont consulté

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

<. 🎜>　

D'autres balises

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 bon

3. 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}

　; 　

Seuls les navigateurs IE8 et supérieurs et non IE prennent en charge :after, zoom:1 peuvent résoudre les problèmes de compatibilité des navigateurs

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!

Étiquettes associées：

css 总结

source：php.cn

Article précédent：Exemple d'analyse des problèmes de compatibilité du navigateur Article suivant：Un exemple d'introduction à l'attribut Meta http-equiv dans htni

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur