Maison  >  Article  >  interface Web  >  Explication détaillée de la raison pour laquelle la classe parent CSS efface les flotteurs

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

黄舟
黄舟original
2017-10-25 10:06:292022parcourir

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

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!

Déclaration:
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