Maison > interface Web > tutoriel CSS > Quel est le rôle de clear en CSS

Quel est le rôle de clear en CSS

下次还敢
Libérer: 2024-04-26 10:27:13
original
890 Les gens l'ont consulté

L'attribut clear en CSS est utilisé pour effacer l'impact des éléments flottants sur les éléments suivants et garantir que les éléments suivants sont disposés normalement. L'attribut clear a 4 valeurs : none : ne pas effacer les flotteurs gauche : effacer la gauche flotter droite : effacer la droite flotte les deux : effacer les flotteurs gauche et droit

Quel est le rôle de clear en CSS

Le rôle de clear dans CSS

dans la mise en page CSS, l'attribut clear est utilisé pour effacer l'impact des éléments flottants sur les éléments suivants. Les éléments flottants affecteront la position de leurs éléments suivants, ce qui empêchera les éléments suivants d'être disposés normalement.

Effacer les flotteurs

L'attribut clear a les valeurs suivantes :

  • none : N'efface aucun flotteur.
  • gauche : Effacez les éléments flottants à gauche.
  • à droite :  Effacez les éléments flottants sur le côté droit.
  • les deux : Effacer les éléments flottants sur les côtés gauche et droit.

Scénarios d'utilisation

Lorsque vous avez besoin que les éléments suivants soient disposés normalement sous l'élément flottant, vous pouvez utiliser l'attribut clear. Par exemple :

<code class="css">.container {
  width: 100%;
}

.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}</code>
Copier après la connexion

Dans cet exemple, l'élément .float-left flotte à gauche et l'élément .clear efface l'influence de l'élément flottant via clear: les deux, afin que les éléments suivants puissent être disposés normalement.

Exemple

L'image suivante est un exemple d'utilisation de l'attribut clear :

[L'image montre deux éléments, l'élément de gauche est flottant, l'élément de droite utilise clear : les deux]

L'élément de droite utilise clear : les deux

[La photo montre que les éléments flottants sont effacés et les éléments de droite sont disposés normalement]

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