Quelle est la fonction de clear en CSS

L'attribut CSS clear (clear) est utilisé pour contrôler la relation entre les éléments et les éléments flottants afin de garantir que les éléments non flottants ne couleront pas sous les éléments flottants. L'utilisation est la suivante : none : Ne pas effacer les flotteurs à gauche : Effacer les flotteurs à gauche : Effacer les flotteurs à droite : Effacer les flotteurs à gauche et à droite

Le rôle de l'attribut clear dans CSS

L'attribut clear est utilisé pour contrôler le flottement d'un élément. La relation entre les éléments garantit que les éléments non flottants ne coulent pas en dessous des éléments flottants.

Usage

clear: none | left | right | both;

• none : Valeur par défaut, n'efface pas le flottant.
• gauche : Effacez les éléments flottants à gauche.
• à droite : Effacez les éléments flottants sur le côté droit.
• les deux : Effacez les éléments flottants sur les côtés gauche et droit.

Fonction

Lorsque les éléments sont flottants, ils seront placés en dehors du flux de documents et les éléments non flottants suivants circuleront sous les éléments flottants. L'attribut clear définit la valeur clear d'un élément non flottant pour le forcer à démarrer au-dessus de l'élément flottant.

Par exemple, le code suivant garantira que l'élément paragraphe ne passe pas sous l'image flottante :

p {
  clear: both;
}

Exemple

Supposons le code HTML suivant :

<div class="container">
  <div class="image float-left"></div>
  <p>段落</p>
</div>

Si l'attribut clear n'est pas défini, l'élément paragraphe s'écoulera sous l'élément d'image ci-dessous, ce qui entraînera une mise en page déroutante.

En définissant l'attribut clear, vous pouvez vous assurer que l'élément paragraphe commence au-dessus de l'élément image :

.container {
  width: 500px;
}

.image {
  float: left;
  width: 200px;
  height: 200px;
  background: #f00;
}

p {
  clear: both;
}

Dans cet exemple, l'élément paragraphe est forcé de commencer au-dessus de l'élément image, ce qui rend la mise en page claire et nette.

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!