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

Utilisez la pseudo-classe after pour effacer les flottants

高洛峰
Libérer: 2017-03-01 14:57:19
original
2433 Les gens l'ont consulté

Dans le passé, lors de la suppression des flotteurs, j'ajoutais toujours

 <div style="clear:both;"></div>
Copier après la connexion

ou je l'écrivais dans la balise br pour résoudre le problème, mais cela permettra ajoutez des balises non sémantiques. Ce qui suit est implémenté en utilisant la pseudo-classe after, qui est compatible avec plusieurs navigateurs

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
Copier après la connexion

est compatible avec IE6 et IE7 car ie6. ,ie7 ne peut pas être utilisé après la pseudo-classe. Ajoutez le code suivant

 .clearfix{zoom:1}
Copier après la connexion

Généralement, s'il y a un flotteur à l'intérieur du calque parent, la hauteur du calque parent peut être de 0, ajoutez clearfix Ensuite, juste

HTML :

 <p class="parent clearfix">
     <p class="left">left</p>
     <p class="right">right</p>
 </p>
Copier après la connexion

CSS :

.clearfix{zoom:1}    
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.parent{
    background-color:red;
    width:120px;
}
.left{
    float:left;
    background-color:pink;
    height:60px;
}
.right{
    float:right;
    background-color:#abcdef;
}
Copier après la connexion

Plus Utilisez après les pseudo-classes pour effacer les flottants. Pour les articles connexes, veuillez faire attention au site Web PHP 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