Exemple de flottaison CSS

Cette page fournit des exemples courants de flottaison.

Grille / Cadre à largeur égale

Box 1
Box 2
Box 1
Box 2
Box 3

En utilisant float La propriété permet de浮动 le contenu en ligne sans difficulté :

Exemple

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Trois cadres (quatre cadres utilisent 25%, deux cadres utilisent 50%, etc.) */
  padding: 50px; /* Si vous avez besoin d'ajouter de l'espace entre les images */
}

Essayez-le vous-même

Qu'est-ce que box-sizing ?

Vous pouvez créer facilement trois cadres flottants côte à côte. Cependant, lorsque vous ajoutez du contenu pour élargir la largeur de chaque cadre (par exemple, la marge interne ou la bordure), ce cadre est endommagé. box-sizing La propriété permet de comprendre que nous pouvons inclure la marge interne et la bordure dans la largeur (et la hauteur) totale du cadre, en assurant que la marge interne reste dans le cadre sans être brisée.

Vous pouvez consulter nos box-sizing CSS Dans ce chapitre, vous découvrirez plus sur la propriété box-sizing.

Images côte à côte

Ce type de grille de cadres (The grid of boxes) peut également être utilisé pour afficher des images côte à côte :

Exemple

.img-container {
  float: left;
  width: 33.33%; /* Trois cadres (quatre cadres utilisent 25%, deux cadres utilisent 50%, etc.) */
  padding: 5px; /* Si vous avez besoin d'ajouter de l'espace entre les images */
}

Essayez-le vous-même

Cadre à largeur égale

Dans cet exemple, vous avez appris à浮动框并排以相等的宽度。Cependant, il n'est pas facile de créer des浮动框具有相同的高度。Cependant, une solution rapide consiste à définir une hauteur fixe, comme dans l'exemple suivant :

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Exemple

.box {
  height: 500px;
}

Essayez-le vous-même

Cependant, en le faisant ainsi, on perd la flexibilité. Si on peut garantir que le contenu dans le cadre est toujours le même, cela peut être fait. Mais souvent, le contenu est différent. Si vous essayez l'exemple précédent sur un téléphone, vous verrez que le contenu du deuxième cadre s'affiche à l'extérieur du cadre. C'est là que l'utilisation de CSS3 Flexbox est utile - car il peut automatiquement étirer le cadre pour qu'il soit de la même longueur que le plus long cadre :

Exemple

Créer un conteneur flexible avec Flexbox :

Box 1 - Voici du texte pour s'assurer que le contenu est vraiment très haut. Voici du texte pour s'assurer que le contenu est vraiment très haut. Voici du texte pour s'assurer que le contenu est vraiment très haut. Voici du texte pour s'assurer que le contenu est vraiment très haut. Voici du texte pour s'assurer que le contenu est vraiment très haut.
Box 2 - Ma hauteur suivra le cadre 1.

Essayez-le vous-même

Le seul problème avec Flexbox est qu'il ne fonctionne pas dans Internet Explorer 10 ou versions antérieures. Vous pouvez le voir dans notre Flexbox CSS Apprenez plus sur le module de mise en page Flexbox dans cette section.

Menu de navigation

Mettre float Utilisé avec une liste d'hyperliens pour créer un menu horizontal :

Exemple

Essayez-le vous-même

Exemples de mise en page Web

Utilisation float Il est courant d'utiliser des attributs pour achever une mise en page complète du Web :

Exemple

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Essayez-le vous-même

Plus d'exemples

Faire flotter une image avec une bordure et une marge vers la droite du paragraphe
Faire flotter une image vers la droite du paragraphe. Ajouter une bordure et une marge à l'image.
Faire flotter une image avec un titre vers la droite
Faire flotter une image avec un titre vers la droite.
Faire flotter la première lettre du paragraphe vers la gauche
Faire flotter la première lettre du paragraphe vers la gauche et définir le style de cette lettre.
Créer un site web avec la flottaison
Créer une page d'accueil avec une barre de navigation horizontale, un en-tête, un pied de page, une barre de navigation latérale et un contenu principal en utilisant la flottaison.

Tous les attributs de flottaison CSS

Attribut Description
box-sizing Définir la méthode de calcul de la largeur et de la hauteur des éléments : doivent-ils inclure les marges internes et les bordures ?
clear spécifiez quels éléments peuvent flotter à côté de l'élément à nettoyer et de quel côté.
float spécifiez comment l'élément doit flotter.
overflow spécifiez ce qui se passe si le contenu dépasse la boîte de l'élément.
overflow-x spécifiez comment traiter les bords gauche/droit du contenu de l'élément en cas de débordement.
overflow-y spécifiez comment traiter les bords supérieur/inferieur du contenu de l'élément en cas de débordement.