Maison >interface Web >tutoriel CSS >Comment effacer le flotteur en CSS
Comment effacer le flotteur en CSS
- coldplay.xixioriginal
- 2021-04-16 15:27:163336parcourir
La façon d'effacer les flottants en CSS est d'utiliser l'attribut clear pour effacer les flottants. L'attribut clear définit quel côté de l'élément n'est pas autorisé à avoir des éléments flottants. Le code est [img{float:left; clair : les deux ;}].
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.
Comment effacer les flottants en CSS :
css peut utiliser l'attribut clear pour effacer les flottants. L'attribut clear est introduit comme suit :
L'attribut clear définit quel côté de l'élément n'est pas autorisé à avoir des éléments flottants. Dans CSS1 et CSS2, cela a été accompli en ajoutant automatiquement une marge supérieure aux éléments clear (c'est-à-dire les éléments avec la propriété clear définie).
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. Quel que soit le changement, le résultat final est le même. S'il est déclaré clair à gauche ou à droite, la bordure 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 de l'attribut :
left Les éléments flottants ne sont pas autorisés à gauche.
right n'autorise pas les éléments flottants sur le côté droit.
Les deux permettent des é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.
Utilisez l'attribut clear pour effacer les éléments flottants :
Les éléments flottants ne sont pas autorisés sur les côtés gauche et droit de l'image :
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" / alt="Comment effacer le flotteur en CSS" >
<img src="/i/eg_smile.gif" / alt="Comment effacer le flotteur en CSS" >
</body>
</html>Rendu :
Recommandations de tutoriel associées : 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!