Le meilleur didacticiel CSS float (flottant) en 2024, dans ce didacticiel, vous pouvez apprendre Qu'est-ce que CSS Float (float)?,Comment flottant élément,Exemples,des éléments adjacents les uns aux autres flottantes,Exemples,Float clair - désactivez Utiliser,Exemples,D'autres exemples,Tous les biens CSS float,

CSS float (flottant)

Qu'est-ce que CSS Float (float)?



Le flotteur de CSS (flottant), l'élément se déplace à gauche ou à droite, les éléments qui l'entourent seront réorganisés.

Float (flottant), est souvent utilisé pour les images, mais il est très utile lorsque la même mise en page.


Comment flottant élément

Élément horizontal flottant, signifie que l'élément ne peut se déplacer à gauche et à droite et ne peut pas déplacer vers le haut et vers le bas.

Un élément flottant va essayer de se déplacer à gauche ou à droite jusqu'à ce que son bord extérieur à travers la frontière ou d'une autre boîte contenant de zone flottante jusqu'à présent.

Éléments après l'élément flottant se concentrer sur elle.

Elements avant l'élément flottant ne seront pas affectés.

Si l'image est flottante droite, le texte suivant coulera sur le côté gauche de celui-ci:

Exemples

img
{
float:right;
}

Essayez »


des éléments adjacents les uns aux autres flottantes

Si vous mettez quelques éléments flottants mis ensemble, s'il y a place, il sera à côté de l'autre.

Ici, nous utilisons la galerie float de l'image de la propriété:

Exemples

.thumbnail
{
float: left;
largeur: 110px;
hauteur: 90px;
margin: 5px;
}

Essayez »


Float clair - désactivez Utiliser

Après les éléments flottants autour des éléments réarrangés, afin d'éviter cela, utilisez la propriété claire.

attribut clear spécifie l'élément ne peut pas apparaître sur les deux côtés de l'élément flottant.

Utilisez la propriété de texte clair pour ajouter une galerie d'image:

Exemples

.text_line
{
clear:both;
}

Essayez »


Exemples

D'autres exemples

L'image de gauche ajouter des bordures et des marges et des flotteurs au paragraphe

Ajoutons les frontières et les marges image et le paragraphe float à la gauche

Titre et images pour le flotteur droit

Laissez le titre et les images au flotteur droit.

Laissez la première lettre d'un paragraphe float à la gauche

Changer le style de telle sorte que la première lettre d'un paragraphe float à gauche.

Ne pas créer une page avec une table

Utilisez flotteur pour créer une page en-tête, pied de page, le contenu à gauche et le contenu principal.


Tous les biens CSS float

colonne "CSS" indique le nombre de versions différentes de CSS (CSS1 ou CSS2) définit la propriété.

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1
CSS float (flottant)
10/30