CSS Float

Qu'est-ce que CSS float?

 

 

Avec CSS float, un élément peut être poussé vers la gauche ou la droite, ce qui permet d'autres éléments à enrouler autour de lui.

Le flotteur est très souvent utilisé pour les images, mais il est également utile lorsque vous travaillez avec des layouts.

---

Comment éléments flottants

Les éléments sont flottait horizontalement, cela signifie qu'un élément ne peut être lancée à gauche ou à droite, pas vers le haut ou vers le bas.

Un élément flottant se déplace aussi loin vers la gauche ou la droite comme il peut. Habituellement, cela signifie tout le chemin vers la gauche ou à droite de l'élément conteneur.

Les éléments après l'élément flottant iront autour de lui.

Les éléments avant l'élément flottant ne sera pas affectée.

Si une image est flottante vers la droite, un texte qui suit s'écoule autour de lui, vers la gauche:

Exemple

img
{
float:right;
}

Essayez vous-même »

---

Les éléments flottants côté de l'autre

Si vous placez plusieurs éléments flottants après l'autre, ils vont flotter à côté de l'autre s'il ya de la place.

Ici, nous avons fait une galerie d'image en utilisant la propriété float:

Exemple

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Essayez vous-même »

---

La désactivation de flotteur - Utilisation de Clair

Éléments après l'élément flottant iront autour de lui. Pour éviter cela, utilisez la propriété clear.

La propriété clear spécifie quels côtés d'un élément d'autres éléments flottants ne sont pas autorisés.

Ajouter une ligne de texte dans la galerie d'images, en utilisant la propriété clear:

Exemple

.text_line
{
clear:both;
}

Essayez vous-même »

---

Exemples

Une image avec une bordure et les marges qui flotte vers la droite dans un paragraphe
Laissez un flotteur image vers la droite dans un paragraphe. Ajouter une bordure et les marges de l'image.

Une image avec une légende qui flotte vers la droite
Soit une image avec un flotteur légende à droite.

Laissez la première lettre d'un flotteur paragraphe vers la gauche
Laissez la première lettre d'un flotteur paragraphe vers la gauche et le style de la lettre.

Création d'un menu horizontal
flottant utilisation avec une liste d'hyperliens pour créer un menu horizontal.

Création d'un site sans tableaux
Utiliser le mode pour créer une page d'accueil avec un en-tête, pied de page, le contenu à gauche et à la page principale.

---

Toutes les propriétés CSS float

Le nombre dans le "CSS" colonne indique dans quelle version CSS la propriété est définie (CSS1 ou CSS2).

Propriété	Description	Valeurs	CSS
effacer	Indique les côtés d'un élément où d'autres éléments flottants ne sont pas autorisés	gauche à droite à la fois aucune hériter	1
flotter	Indique si oui ou non une boîte devrait flotter	gauche à droite aucune hériter	1