CSS Exemples de Float
Créer des Boîtes de Largeur Équivalente
Avec la propriété float , il est facile de faire flotter des boîtes de contenu côte à côte :
Boîte 1
Boîte 2
Boîte 1
Boîte 2
Boîte 3
Exemple
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* trois boîtes (utilisez 25% pour quatre, et 50% pour deux, etc.) */
padding: 50px; /* si vous voulez de l'espace entre les images */
} Qu'est-ce que le box-sizing ?
Vous pouvez facilement créer trois boîtes flottantes côte à côte. Cependant, lorsque vous ajoutez quelque chose qui augmente la largeur de chaque boîte (par exemple, du padding ou des bordures), la boîte peut se briser. La propriété box-sizing nous permet d'inclure le padding et la bordure dans la largeur totale de la boîte (et la hauteur), en veillant à ce que le padding reste à l'intérieur de la boîte et qu'elle ne se brise pas.
Vous pouvez en lire plus sur la propriété box-sizing dans notre Chapitre sur le Box Sizing CSS .
Images Côté à Côté
La grille de boîtes peut également être utilisée pour afficher des images côte à côte :
Exemple
.img-container {
float: left;
width: 33.33%; /* trois conteneurs (utilisez 25% pour quatre, et 50% pour deux, etc.) */
padding: 5px; /* si vous voulez de l'espace entre les images */
} Créer des Boîtes avec des Hauteurs Équivalentes
Dans l'exemple précédent, vous avez appris à faire flotter des boîtes côte à côte avec une largeur équivalente. Cependant, il n'est pas facile de créer des boîtes flottantes avec des hauteurs équivalentes. Une solution rapide consiste à définir une hauteur fixe, comme dans l'exemple ci-dessous :
Boîte 1
Du contenu, du contenu, du contenu
Boîte 2
Du contenu, du contenu, du contenu
Du contenu, du contenu, du contenu
Du contenu, du contenu, du contenu
Exemple
.box {
height: 500px;
} Cependant , ce n'est pas très flexible. C'est acceptable si vous pouvez garantir que les boîtes auront toujours la même quantité de contenu. Mais souvent, le contenu n'est pas le même. Si vous essayez l'exemple ci-dessus sur un téléphone mobile, vous verrez que le contenu de la deuxième boîte sera affiché en dehors de la boîte. C'est là que le CSS Flexbox est utile - car il peut automatiquement étirer les boîtes pour qu'elles soient aussi longues que la plus longue boîte :
Exemple
Utiliser Flexbox pour créer des boîtes flexibles :
Astuce : Vous pouvez en lire plus sur le Module de Mise en Page Flexbox dans notre Chapitre sur le Flexbox CSS .
Menu de Navigation
Vous pouvez également utiliser float avec une liste d'hyperliens pour créer un menu horizontal :
Exemple
Toutes les Propriétés CSS Float
| Propriété | Description |
|---|---|
| box-sizing | Définit comment la largeur et la hauteur d'un élément sont calculées : doivent-elles inclure le padding et les bordures, ou non ? |
| clear | Spécifie ce qui doit se passer avec l'élément qui est à côté d'un élément flottant |
| float | Spécifie si un élément doit flotter à gauche, à droite, ou pas du tout |