Qu'est-ce que float en CSS

Flotter en CSS signifie déplacer un élément vers la gauche ou la droite, et les éléments autour de lui seront également réorganisés. Un élément flottant se déplace le plus à gauche ou à droite possible jusqu'à ce que son bord extérieur touche la bordure de la boîte conteneur ou d'une autre boîte flottante.

L'environnement de cet article : windows10, css3, cet article est applicable à toutes les marques d'ordinateurs.

Introduction à Float :

CSS Float déplacera un élément vers la gauche ou la droite, et ses é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.

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

Comment faire flotter des éléments ? La direction horizontale de l'élément

flotte, ce qui signifie que 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.

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 s'enroulera à gauche :

Exemple :

img{
    float:right;
}

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

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

Exemple :

Utiliser l'attribut float pour la galerie d'images :

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

Clear float - Après avoir utilisé clear

pour faire flotter l'élément, les éléments environnants seront réorganisé. Pour éviter cela, utilisez l'attribut clear. L'attribut

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

Exemple :

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

.text_line{
    clear:both;
}

Recommandations associées : Tutoriel 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!