Introduction au principe des flotteurs de compensation CSS-tutoriel CSS-php.cn

Introduction au principe des flotteurs de compensation CSS

王林

Libérer： 2020-07-18 17:31:11

avant

2524 Les gens l'ont consulté

Introduction au principe des flotteurs de compensation CSS

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>

Copier après la connexion

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