Classification en CSS
Clear, Clip, display, float

Classification en CSS

Clear

La propriété « clear » va etre utilisée pour définir si un élément doit se trouver sur la meme bande horizontale qu’un élément flottant.

On peut donc écrire que cette propriété indique de quelle manière le texte va etre placé par rapport à une boite flottante précédente.

clear: valeur;
Valeurs possibles:

• none (rien)
• both (les deux)
• left (gauche)
• right (droite)

Allons plus loin dans les explication :

Valeur « None »
La propriété « clear: none; » n’est pas affecté par rapport aux éléments flottants et cette propriété n’influence pas le positionnement en cours.
both
Avec la propriété « clear: both; » la boite générée va se déplacer sous chacune des boites flottantes qui précédent dans le code source.
Left
La propriété « clear: Left; » va placer l’élément en bas juste à droite de celui qui le précéde dans le code source.
Right
A l’inverse du précédent, La propriété « clear: right; » va placer l’élément en bas juste à gauche de celui qui le précéde dans le code source.

Voir un exemple d’une propriété clear avec CSS

Clip

Vous pouvez contrôler la visibilité des éléments avec la propriété : clip clip: valeur;
Valeurs possibles:

• auto
• shape

Souvent, « shape est reconnu par le clip rect (rectangle) clip: rect(10px, 10px, 10px, 10px);

Voir un exemple :

Voir le code CSS :

 .imageclip { position:absolute ; width: 200px ; clip: rect (0px, 70px, 200px, 0px) ; }  

Voir le code dans l’élément

<div class= "imageclip"><img src= "images/w3c.gif"></div> 

Curseur

Vous pouvez définir l’apparence de votre curseur grace à la propriété :cursor cursor: valeur;

Valeurs possibles:

• auto
• crosshair
• default
• help
• move
• pointer
• text
• url
• wait
• e-resize
• ne-resize
• nw-resize
• n-resize
• se-resize
• sw-resize
• s-resize
• w-resize

Voir un exemple

Affichage

Vous avez le contrôle des éléments à afficher ou non avec la propriété : display display: valeur;
Valeurs possibles:

• block
• inline
• list-item
• none

Voir un exemple

flottement

Cette propriété « float » définit le flottement d’une boàte à gauche, à droite ou pas du tout.
On peut l’appliquer à tous les éléments générant des boites sauf si elles sont en position absolue. float: valeur;
Valeurs possibles:

• left
• right
• none

Voir un exemple

Overflow

La propriété de feuille de style css overflow permet de gérer les dépassements de blocs (calque, champ formulaire…). overflow: valeur;
Valeurs possibles:

• auto
• hidden
• visible
• scroll

Voir un exemple :

 Comme vous pouvez voir, avec cette propriété vous pouvez imiter une iframe. Cette box est définie en "auto" Signifiant que si le contenu de l'élément dépasse les bornes il devrait ajouter un scrollbar. 

Voir le code CSS :

#overflow_box { width:200px; height:200px; border-top: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px; overflow: auto;}  

Voir le code dans l’élément

<div id="overflow_box">Contents</div>

Visibilité

Vous pouvez rendre un élément visible ou pas grace à la propriété : visibility visibility: valeur;

Valeurs possibles:

• hidden
• visible

Voir un exemple

Z-Index

La propriété de feuille de style css z-index permet de spécifier la position d’empilement d’un bloc par rapport aux autres (notion de profondeur).

Valeurs possibles:

1. auto
2. nombre

Voir un exemple
Positionnement des éléments en CSS >>>