Maison > Article > interface Web > Introduction au principe des flotteurs de compensation CSS

Introduction au principe des flotteurs de compensation CSS

王林avant: 2020-07-18 17:31:112408parcourir

Tout d’abord, nous devons savoir que clear : les deux sont la clé pour effacer les flotteurs.

(Tutoriel recommandé : Démarrage rapide CSS)

clear est un attribut de positionnement en CSS qui spécifie quel côté de l'élément n'autorise pas d'autres éléments flottants. Puis clair : les deux stipulent que les éléments flottants ne sont pas autorisés sur les côtés gauche et droit.

L'attribut clear ne peut fonctionner que sur les éléments de niveau bloc. C'est le rôle de display:block dans la suppression des styles flottants.

De plus visibilité : caché ; hauteur : 0 ; Tant que la valeur du contenu est vide, peu importe qu'il soit écrit ou non.

Alors pourquoi voulez-vous effacer le flotteur ? La raison la plus courante est que le conteneur extérieur est fortement réduit. Démonstration de code :

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

Pour le montrer clairement, le contenu du .wrap. :after style est défini sur content : 'after pseudo-element', comme le montre la figure ci-dessous.

Introduction au principe des flotteurs de compensation CSS

Ajoutez ensuite clear:both au style .wrap:after, indiquant que les éléments flottants ne sont pas autorisés sur les côtés gauche et droit du pseudo-élément after. pas d'autre moyen que de mettre le pseudo-élément after Ci-dessous, cette fois est montré dans l'image ci-dessous.

Introduction au principe des flotteurs de compensation CSS

Incidemment, il prend en charge la hauteur de l'élément parent .wrap, ce qui élimine efficacement le flottement et résout le problème de l'effondrement en hauteur du conteneur extérieur.

Ensuite, nous définissons le contenu dans le style .wrap:after sur content:' ", et finalement il se présente comme indiqué dans la figure ci-dessous.

Introduction au principe des flotteurs de compensation 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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelle est la différence entre les pseudo-classes et les pseudo-éléments en CSSArticle suivant：Quelle est la différence entre les pseudo-classes et les pseudo-éléments en CSS

Articles Liés

Voir plus