Le float propriété indique si oui ou non un élément doit flotter.
La clear propriété est utilisée pour contrôler le comportement des éléments flottants.
La propriété float
Dans son utilisation la plus simple, le float propriété peut être utilisée pour envelopper le texte autour des images.
L'exemple suivant spécifie que l'image doit flotter vers la droite dans un texte:
Le clear de la propriété
La clear propriété est utilisée pour contrôler le comportement des éléments flottants.
Éléments après un élément flottant iront autour de lui. Pour éviter cela, utilisez la clear propriété.
Le clear propriété indique sur quels côtés d'un élément des éléments flottants ne sont pas autorisés à flotter:
Le clearfix Hack - overflow: auto;
Si un élément est plus grand que l'élément contenant, et il est flottant, il va déborder à l'extérieur de son conteneur.
Ensuite , nous pouvons ajouter overflow: auto; à l'élément contenant pour résoudre ce problème:
Mise en page Web Exemple
Il est fréquent de faire des modèles Web entiers en utilisant le float bien:
Exemple
div {
border: 3px solid blue;
}
.clearfix {
overflow: auto;
}
nav {
float: left;
width: 200px;
border: 3px solid #73AD21;
}
section {
margin-left: 206px;
border: 3px solid red;
} Essayez - le vous - même » 
Autres exemples
Une image avec la frontière et des marges qui flotte vers la droite dans un paragraphe
Soit une image flottante vers la droite dans un paragraphe. Ajouter une bordure et des marges à l'image.
Une image avec une légende qui flotte à la droite
Soit une image avec un flotteur de légende à la droite.
Laissez la première lettre d'un paragraphe float à la gauche
Laissez la première lettre d'un paragraphe float à gauche et le style de la lettre.
Création d' un menu horizontal
Utilisez flotteur avec une liste d'hyperliens pour créer un menu horizontal.
Création d' une page d' accueil sans tables
Utilisez flotteur pour créer une page d'accueil avec un en-tête, pied de page, le contenu à gauche et le contenu principal.
Toutes les propriétés CSS Float
| Propriété | La description |
|---|---|
| clear | Indique sur quels côtés d'un élément où les éléments flottants ne sont pas autorisés à flotter |
| float | Indique si un élément doit flotter |
| overflow | Indique ce qui se passe si le contenu déborde de la boîte d'un élément |
| overflow-x | Indique ce qu'il faut faire avec la gauche / droite de bords du contenu si elle déborde la zone de contenu de l'élément |
| overflow-y | Indique ce qu'il faut faire avec les bords supérieurs / inférieurs du contenu si elle déborde la zone de contenu de l'élément |