Maison > Article > interface Web > A quoi sert clear en CSS

A quoi sert clear en CSS

WBOYoriginal: 2022-04-15 15:24:196063parcourir

En CSS, l'attribut clear est utilisé pour effacer l'effet flottant d'un élément. Cet attribut peut spécifier l'effet des éléments flottants sur le côté gauche ou droit d'un paragraphe. La valeur par défaut de cet attribut est none, ce qui signifie flottant. les éléments peuvent apparaître des deux côtés. Il ne peut pas y avoir d'éléments flottants sur les côtés gauche, droit ou gauche et droit d'un élément réglable. La syntaxe est "élément {clear: valeur d'attribut;}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

À quoi sert clear en CSS ?

La fonction de clear en CSS est d'effacer l'effet flottant des éléments.

L'attribut clear précise que les éléments flottants ne sont pas autorisés sur le côté gauche ou droit du paragraphe.

En CSS1 et CSS2, ceci est réalisé en ajoutant automatiquement une marge supérieure aux éléments clairs (c'est-à-dire les éléments avec l'attribut clear défini). En CSS2.1, un espace libre est ajouté au-dessus de la marge supérieure de l'élément, mais la marge elle-même ne change pas.

Quelle que soit la modification effectuée, le résultat final est le même. S'il est déclaré clair à gauche ou à droite, la bordure extérieure supérieure de l'élément sera juste en dessous de la marge inférieure de l'élément flottant de ce côté.

valeur d'attribut clear :

eft Les éléments flottants ne sont pas autorisés à gauche.
right Les éléments flottants ne sont pas autorisés sur le côté droit.
les deux n'autorisent pas les éléments flottants sur les côtés gauche et droit.
aucun Valeur par défaut. Permet aux éléments flottants d'apparaître des deux côtés.
inherit spécifie que la valeur de l'attribut clear doit être héritée de l'élément parent.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="A quoi sert clear en CSS" >
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
</body>
</html>

Résultat de sortie :

A quoi sert clear en CSS

(Partage vidéo d'apprentissage : tutoriel vidéo 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!

html5 css css3 继承外边距

Déclaration：

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

Article précédent：A quoi sert le tampon dans le nœud ?Article suivant：A quoi sert le tampon dans le nœud ?

Articles Liés

Voir plus