A quoi sert clear en CSS-Questions et réponses frontales-php.cn

A quoi sert clear en CSS

WBOY

Libérer： 2022-04-15 15:24:19

original

6117 Les gens l'ont consulté

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;}".

A quoi sert clear en CSS

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>

Copier après la connexion

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!