Quel est le rôle de l'attribut float dans les attributs CSS

La fonction de l'attribut float en CSS est de contrôler le mouvement des éléments Même si l'élément se déplace vers la gauche ou la droite, les éléments autour de lui seront également réorganisés dans la direction horizontale de l'élément flottant ; L'élément ne peut se déplacer que vers la gauche et la droite, mais pas vers le haut et vers le bas ; Un élément flottant se déplacera aussi loin que possible vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Quel est le rôle de l'attribut float dans l'attribut css ?

float, un attribut de CSS, les principales valeurs d'attribut sont : left (left float), none (pas float), right (right float), hériter (hériter de l'élément parent float), principalement utilisé pour la mise en page des pages Web. .

CSS Float déplacera l'élément vers la gauche ou la droite, et les éléments environnants seront également réorganisés.

Float est souvent utilisé pour les images, mais il est également très utile en mise en page.

Comment les éléments flottent

L'élément flotte horizontalement, ce qui signifie que l'élément ne peut se déplacer que de gauche à droite, mais pas de haut en bas.

Un élément flottant essaiera de se déplacer vers la gauche ou la droite jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

Les éléments après l'élément flottant l'entoureront.

Les éléments situés avant l'élément flottant ne seront pas affectés.

Si l'image flotte à droite, le flux de texte suivant l'entourera vers la gauche :

Exemple

img
{
    float:right;
}

Éléments flottants les uns à côté des autres

Si vous assemblez plusieurs éléments flottants, s'il y a de la place, ils seront l'un à côté de l'autre.

Ici, nous utilisons l'attribut float pour la galerie d'images :

Exemple

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

Clear float - Utilisez clear

Après qu'un élément flotte, les éléments environnants seront réorganisés. Pour éviter cela, utilisez l'attribut clear. . L'attribut

clear spécifie que les éléments flottants ne peuvent pas apparaître des deux côtés de l'élément.

Utilisez l'attribut clear pour ajouter une galerie d'images au texte :

Exemple

.text_line
{
    clear:both;
}

Apprentissage recommandé : "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!