Maison > interface Web > tutoriel CSS > Plusieurs méthodes pour effacer les flotteurs

Plusieurs méthodes pour effacer les flotteurs

php中世界最好的语言
Libérer: 2018-03-22 11:43:11
original
2613 Les gens l'ont consulté

Cette fois, je vais vous présenter plusieurs méthodes de dégagement des flotteurs, et quelles sont les précautions pour nettoyer les flotteurs. Voici des cas pratiques, jetons un coup d'œil.

html

    <p>
        <p class=&#39;box-left&#39;></p>
        <p class=&#39;box-right&#39;></p>
    </p>
Copier après la connexion

css

.box-left,.box-right{
        width:200px;
        height:200px;
        float: left;
        background: red;
        border:1px solid #333;
    }
Copier après la connexion

Première méthode :. clear:box}

Deuxième méthode : .box{overflow:hidden}

Troisième méthode : .box{ overflow:auto>

Quatrième méthode: .box:after{ content:""; visibility:hidden ; :block; clear:both;}.box{ zoom:1;}La cinquième méthode

 : .box{height:200px} définit la hauteur

La sixième méthode

 : .box{display:table}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sites Web chinois php connexes. des articles !

Lecture recommandée :

CSS pour dessiner un cœur rouge


La différence entre affichage et visibilité


Plusieurs façons d'implémenter le placement du pied de page en CSS

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:
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