Quels sont les attributs float ?

les attributs float incluent gauche, droite, aucun, hériter, etc. Introduction détaillée : 1. à gauche, l'élément flotte vers la gauche Lorsqu'il est défini sur la gauche, l'élément s'éloignera du flux normal du document, flottera vers la gauche et permettra à d'autres éléments d'être affichés sur son côté droit ; , l'élément flotte vers la droite et vers la gauche De même, lorsqu'il est défini sur la droite, l'élément s'éloignera du flux normal du document, flottera vers la droite et permettra à d'autres éléments d'être affichés sur son côté gauche 3. none, le ; l'élément ne flottera pas, et lorsqu'il est défini sur aucun, l'élément reviendra à la normale, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

L'attribut float (float) est l'un des attributs couramment utilisés en CSS, utilisé pour contrôler la position flottante des éléments sur la page. En définissant la propriété float de l'élément, vous pouvez retirer l'élément du flux de documents et le positionner librement sur la page. Cet article présentera les différentes valeurs de l'attribut float et leur utilisation.

L'attribut float a les valeurs suivantes :

1 left : L'élément flotte vers la gauche. Lorsqu'il est défini à gauche, l'élément s'éloignera du flux normal du document, flottera vers la gauche et permettra à d'autres éléments d'être affichés à sa droite. Si la page n'est pas assez large pour accueillir l'élément flottant, elle sera automatiquement renvoyée à la ligne.

2. à droite : L'élément flotte vers la droite. Semblable à gauche, lorsqu'il est défini à droite, l'élément s'éloignera du flux normal du document, flottera vers la droite et permettra à d'autres éléments d'être affichés à sa gauche. Si la page n'est pas assez large pour accueillir l'élément flottant, elle sera automatiquement renvoyée à la ligne.

3. aucun : L'élément ne flotte pas. Lorsqu'il est défini sur aucun, l'élément reviendra à la présentation normale du flux de documents et ne flottera pas. Il s'agit de la valeur par défaut.

4. hériter : hérite de l'attribut flottant de l'élément parent. Lorsqu'il est défini sur hériter, l'élément héritera de l'attribut float de l'élément parent. Si l'élément parent ne définit pas l'attribut float, c'est la même chose que none.

Fonctionnalités de mise en page des éléments flottants :

- Les éléments flottants seront automatiquement réduits à la largeur de leur contenu et n'occuperont pas toute la largeur de l'élément parent.

- Les éléments flottants seront positionnés aussi près que possible du côté gauche ou droit de leur conteneur, à côté d'autres éléments flottants.

- Si la largeur de l'élément flottant dépasse la largeur de l'élément parent, il s'enroulera automatiquement.

- Les éléments flottants s'éloignent du flux normal du document, de sorte que les éléments non flottants suivants remplissent l'espace vide laissé par l'élément flottant.

Scénarios d'application d'éléments flottants :

1. Implémenter une disposition multi-colonnes : en définissant plusieurs éléments comme éléments flottants, vous pouvez obtenir une disposition multi-colonnes. Par exemple, définir plusieurs éléments div sur float: left peut les disposer horizontalement dans une rangée.

2. Effet environnant des images et du texte : en définissant l'image comme élément flottant, vous pouvez obtenir l'effet d'enroulement du texte autour de l'image.

3. Menu de navigation : en définissant les éléments de la liste du menu de navigation comme éléments flottants, vous pouvez obtenir un menu de navigation disposé horizontalement.

4. Mise en page réactive : dans la conception réactive, en définissant l'attribut flottant sous différentes tailles d'écran, la mise en page adaptative de la page sur différents appareils peut être obtenue.

Il convient de noter que les éléments flottants peuvent entraîner un effondrement de la hauteur de l'élément parent, c'est-à-dire que l'élément parent ne peut pas s'étendre automatiquement pour accueillir l'élément flottant. Pour résoudre ce problème, vous pouvez ajouter une classe clearfix à l'élément parent ou utiliser d'autres méthodes pour effacer les flottants.

Résumé :

L'attribut float est un attribut de mise en page couramment utilisé en CSS. En définissant l'attribut float, vous pouvez obtenir un positionnement libre des éléments et des effets de mise en page multi-colonnes. Ses valeurs sont gauche, droite, aucun et hériter, qui indiquent respectivement flottant à gauche, flottant à droite, non flottant et héritant de l'attribut flottant de l'élément parent. Les éléments flottants peuvent produire une variété d'effets de disposition, mais vous devez faire attention au problème qui peut entraîner l'effondrement de la hauteur de l'élément parent.

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!