Quel est le rôle de clear en CSS

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

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>

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!