Maison > interface Web > tutoriel CSS > le corps du texte

Explication détaillée de la raison pour laquelle la classe parent CSS efface les flotteurs

黄舟
Libérer: 2017-10-25 10:06:29
original
2031 Les gens l'ont consulté

Les facteurs flottants sont souvent utilisés dans la production de pages Web statiques. Par exemple, si vous souhaitez que les éléments au niveau du bloc n'occupent pas une seule ligne, vous utilisez souvent des paramètres flottants pour y parvenir. Cependant, lors de l'application, vous constaterez qu'après avoir défini la sous-classe float, le float n'est pas effacé pour la classe parent, ce qui entraînera les problèmes suivants :

    1. L'élément flottant sera relatif à le conteneur parent ou le front L'élément positionné est flottant. L'élément flottant se détache du flux de documents, c'est-à-dire qu'il n'occupe plus sa position d'origine et affectera les éléments suivants ou le conteneur parent .

2. Le conteneur parent se développera automatiquement dans des circonstances normales, mais une fois l'élément enfant flottant, la position n'est pas conservée et le conteneur parent a l'impression qu'il n'existe pas, donc il ne le fera pas. développer.

Par conséquent, lors de l'écriture de pages Web statiques, vous devez faire attention au problème de la suppression des flottants. Un morceau de code pour effacer les flottants peut être facilement appelé :

 .clearFloat:after{
                content:' ';
                display:block;
                height:0;
                visibility:hidden;
}
          .clearFloat{
                zoom:1;
}
Copier après la connexion
.

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:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal