CSS : Clear, Clip, display, float...

» Classification en CSS

Classification en CSS

Introduction
Les propriétés clear et clip permettent la gestion d'éléments flotants.
Héritage Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien)
Clear
La propriété "clear" va être utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant.

On peut donc écrire que cette propriété indique de quelle manière le texte va être placé par rapport à une boîte 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"

Avec la propriété "clear: none;" rien n'est 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 boîte générée va se déplacer sous chacune des boîtes 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. 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

Clip
Vous pouvez controler la visibilé 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
Voir le code dans l'élément

Curseur
Vous pouvez définir l'apparence de votre curseur grâce à 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 controle des éléments à afficher ou non avec la propriété : display
display: valeur;
Valeurs possibles:
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 boîtes sauf si elles sont en position absolue.
float: valeur;
Valeurs possibles:
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: 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
Voir le code dans l'élément

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).
z-index: valeur;
Valeurs possibles:
Voir un exemple

Positionnement des éléments en CSS >>>

Débuter en CSS :

Comprendre et coder en CSS

Tutoriels

Liens