Dernière mise à jour : 21/04/2016

En règle générale, tous les blocs et éléments d'une page Web apparaissent dans le navigateur dans l'ordre dans lequel ils sont définis dans le code HTML. Cependant, CSS fournit une propriété float spéciale qui nous permet de définir des éléments flottants, afin que nous puissions créer des pages Web plus intéressantes et plus variées dans leur conception.

Cette propriété peut prendre l'une des valeurs suivantes :

gauche : l'élément se déplace vers la gauche et tout le contenu qui se trouve en dessous s'enroule autour du bord droit de l'élément

right : l'élément se déplace vers la droite

aucun : annule le retour à la ligne et ramène l'objet à sa position normale

Lorsque vous utilisez la propriété float sur des éléments autres que l'élément img à styliser, il est recommandé de définir la propriété width.

Imaginez donc que nous devions afficher une image sur la page à gauche du texte principal, qu'une barre latérale soit à droite et que le reste de l'espace soit occupé par le texte principal de l'article. Définissons d'abord l'interface de la page sans la propriété float :

Dans ce cas, nous obtiendrons un placement séquentiel des éléments sur la page :

Maintenant, sur la même page, nous allons appliquer la propriété float, en modifiant les styles comme suit :

Image ( float:left; /* float left */ margin:10px; margin-top:0px; ) .sidebar( border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin- gauche:10px; taille de police: 20px; float: right;

Le placement des éléments sur la page changera en conséquence :

Les éléments auxquels la propriété float est appliquée sont également appelés éléments flottants.

Aucun flux. propriété claire

Il devient parfois nécessaire d’interdire les flux. Une tâche similaire peut être pertinente si un bloc doit être déplacé vers une nouvelle ligne et non enroulé autour d'un élément flottant. Par exemple, en règle générale, le pied de page doit être situé strictement en bas et s'étendre sur toute la largeur de la page. S'il y a un élément flottant devant le pied de page, alors le pied de page peut circuler autour de cet élément, ce qui n'est pas souhaitable.

Pour empêcher le retour à la ligne des éléments, CSS utilise la propriété clear, qui indique au navigateur que l'élément en cours de style ne doit pas avoir de retour à la ligne.

La propriété clear peut prendre les valeurs suivantes :

gauche : l'élément stylisé peut s'enrouler autour de l'élément flottant vers la droite. A gauche le flux ne fonctionne pas

right : l'élément stylisé ne peut flotter qu'à gauche d'un élément flottant. Et à droite le flux ne fonctionne pas

les deux : l'élément stylisé peut s'enrouler autour des éléments flottants et se déplacer vers le bas par rapport à eux

aucun : l'élément stylisé se comporte de manière standard, c'est-à-dire qu'il participe au flux droit et gauche

Par exemple, disons qu'un pied de page est défini sur une page Web :

La présence d'un wrap créera un affichage incorrect dans lequel le pied de page se déplace vers le haut :

Modifions le style du pied de page :

Pied de page (border-top : 1px solide #ccc ; clair : les deux ; )

Désormais, le pied de page ne circulera plus autour de l'image, mais descendra.

Dans ce tutoriel, nous aborderons un sujet très important, à savoir le flux d'un document HTML, ainsi que les moyens de le contrôler à l'aide des propriétés CSS float et clear.

Séquence d'affichage des éléments HTML

Par défaut, un document HTML est dessiné de haut en bas, du bord supérieur de la fenêtre du navigateur vers le bord inférieur. C'est également l'ordre dans lequel les éléments d'une page Web apparaissent. L'ordre de sortie est appelé flux de documents.

La capture d'écran ci-dessous est un exemple de l'ordre standard d'affichage des éléments :

Il existe plusieurs outils en CSS pour contrôler ce flux. Par exemple, vous pouvez définir le flux d'éléments et également les retirer du flux général. L'un de ces outils, la propriété float, sera discuté plus en détail.

CSS flottant

Un élément auquel la propriété float est appliquée est poussé vers le bord gauche ou droit de l'élément parent (en fonction de la valeur spécifiée), et tous les éléments situés en dessous sont surélevés et semblent s'enrouler autour de l'élément. Pour mieux comprendre, imaginez une pierre qui coule autour de l'eau. C’est d’ailleurs pour cette raison que de tels éléments sont également appelés « flottants ».

Cette propriété est largement utilisée en aménagement, il est donc très important de comprendre son fonctionnement. Float est utilisé pour créer des mises en page multi-colonnes, des menus de navigation, des galeries et bien plus encore.

Regardons les valeurs que peut prendre la propriété float. Il n'y en a que trois :

• gauche - l'élément est aligné à gauche. Les éléments inférieurs dans le flux circulent autour de lui sur le côté droit.
• à droite - la valeur opposée à la précédente. L'élément est aligné sur le côté droit et les éléments inférieurs dans le flux s'écoulent autour de lui vers la gauche le long du bord gauche.
• none - l'élément ne s'enroule pas et est dans sa position normale.

Comme mentionné, un élément avec la propriété float flotte sur le côté gauche ou droit de l'élément parent. Il peut s'agir soit du conteneur principal de la page Web, soit d'un petit bloc, par exemple une barre latérale.

Cette propriété peut être appliquée aux éléments en ligne et en bloc. Mais comme un élément block occupe par défaut toute la largeur du conteneur, lors de l'utilisation d'un float avec un bloc, il est recommandé de lui donner une largeur de width et ainsi laisser de la place au contenu qui doit faire le tour de l'élément. Autrement dit, il faut permettre à l’eau de s’écouler autour de la pierre et ne pas bloquer l’écoulement.

Vous trouverez ci-dessous un exemple visuel de la façon dont la propriété float fonctionne avec les valeurs gauche et droite :

Comme vous pouvez le constater, CSS vous permet de créer rapidement et facilement une mise en page multi-colonnes en utilisant seulement deux propriétés par paires - float et width . Et il est encore plus facile de définir du texte pour qu'il s'enroule autour d'une image - nous lui avons simplement appliqué la propriété float:right.

Déballer : effacer la propriété

En mise en page, il est presque toujours nécessaire de réinitialiser le flux après un certain élément. Par exemple, dans le cas où le bloc principal d'une page Web est enroulé autour d'une colonne latérale (barre latérale), nous devrons probablement le dérouler après la barre latérale. Après tout, ce n'est certainement pas le dernier élément de la page et, au minimum, il y a aussi un pied de page - la partie inférieure de la page, le « pied de page », qui doit être situé en bas, ne pas bouger nulle part et ne pas envelopper quoi que ce soit.

Maintenant, dans la capture d'écran, l'habillage après la barre latérale n'est pas annulé et le pied de page du bloc se comporte étrangement, essayant de s'enrouler autour de l'élément ci-dessus (mais rien ne se passe, car la largeur d'au moins un élément ne le permet pas - l'élément obtient " bloqué"):

Comment réinitialiser l'enveloppe ? La propriété claire et ses valeurs nous y aideront :

• left - un élément auquel la propriété clear:left est appliquée ne flotte plus autour de l'élément avec la propriété float:left, mais le float droit est conservé.
• right - un élément auquel la propriété clear:right est appliquée cesse de circuler autour de l'élément avec la propriété float:right, mais le flux gauche demeure.
• les deux - annule complètement l'emballage de tous les côtés. L'élément descend et forme un flux standard. Le flux autour des éléments qui le suivent cesse également d'affecter.
• none - annule la suppression. L'élément se comportera comme d'habitude et sera affecté par les paramètres float.

Utilisons ce que nous avons appris et définissons notre pied de page sur clear:both :

En conséquence, le pied de page a été nivelé et mis à sa place. À propos, le résultat de la propriété margin-bottom:10px, précédemment appliquée à la barre latérale, est également devenu visible.

Prise en charge du navigateur

Les propriétés float et clear sont prises en charge par tous les navigateurs utilisés, y compris IE6 et IE7.

Lorsqu'il est utilisé correctement, float se transforme en un puissant outil de mise en page utilisé pour aligner et organiser les éléments. Cependant, pour garder cet outil sous contrôle, un contrepoids est nécessaire, sans lequel l'énorme potentiel du flotteur est réduit à quelques tâches étroites. Nous parlons d'annuler le flux en utilisant différentes méthodes. Citons quelques-uns des plus populaires.

Largeur des éléments

Si les éléments flottants occupent toute la largeur disponible, alors les éléments restants qui les suivent commenceront sur une nouvelle ligne. Pour ce faire, la largeur totale des éléments doit être égale à 100 %. L'exemple 1 montre comment créer des flèches sur une ligne.

Exemple 1 : Utilisation de la largeur

Chaque bloc avec une flèche occupe désormais 50 % de largeur et leur total totalise 100 % de largeur, de sorte que le paragraphe après la flèche commence sur une nouvelle ligne.

Cette méthode est rarement utilisée, car il n'est pas toujours possible de préciser explicitement la largeur des éléments, et la méthode ne résout pas le problème de la hauteur du bloc et de son arrière-plan (Fig. 1).

Riz. 1. Pas de remplissage d'arrière-plan

Utiliser le débordement

Flotteur de nettoyage 2

Créez une page Web comme indiqué sur la Fig. 1. Pour désigner le rouble, utilisez le symbole ₽.

Afficher la réponse

Votre commande

Produit

Prix

T-shirt

599 RUR

Shorts

299 ₽

Total

898 RUR

Float est une propriété CSS permettant de positionner des éléments. Afin de comprendre son objectif et son origine, vous pouvez vous tourner vers le design imprimé. Dans une mise en page imprimée, les images peuvent être positionnées sur la page de manière à ce que le texte « circule » autour d'elles. Ceci est généralement appelé « habillage de texte ».

Dans les programmes de mise en page, les éléments contenant du texte peuvent prendre en compte les images ou les ignorer. S'ils sont ignorés, le texte apparaîtra au-dessus des images comme s'ils n'y étaient pas. C'est la principale différence entre le fait que les images fassent ou non partie du flux principal de la page. La conception Web est très similaire.

Dans la conception Web, les éléments de page avec la propriété float définie se comportent exactement comme des images imprimées lorsque le texte « circule » autour d'eux. Ces éléments font partie du flux principal de la page Web. Cependant, les choses sont différentes si les éléments utilisent un positionnement absolu. Les éléments positionnés de manière absolue sont supprimés du flux principal de la page, comme dans l'exemple ci-dessus où le texte imprimé ignore les images. De tels éléments n'affectent pas la position des autres éléments, qu'ils se touchent ou non.

La définition de la propriété float fonctionne comme ceci :

#sidebar ( float: droite; )

Il existe un total de 4 valeurs pour la propriété float. Gauche et droite sont utilisées pour les directions correspondantes. Aucun (par défaut) - garantit que l'élément ne flottera pas. Et Ensure , qui dit que le comportement doit être le même que celui de l'élément parent.

A quoi peut servir le flotteur ?

En plus d'envelopper du texte autour d'images, float peut être utilisé pour créer la mise en page d'un site entier.

La propriété float est également utile à plus petite échelle. Par exemple, considérons une petite zone sur une page de site Web. Disons que vous utilisez float pour votre avatar, lorsque vous modifiez la taille de l'image, la taille du texte sera ajustée pour s'adapter à l'image.

Le même agencement d'objets peut être obtenu en utilisant le positionnement. L'objet conteneur se voit attribuer un positionnement relatif et l'objet image se voit attribuer un positionnement absolu. Dans ce cas, l’avatar n’affectera pas la position du texte.

Désactiver la propriété float

Pour float, la propriété associée est claire. Tout élément dont la propriété clear est définie ne flottera pas vers le haut comme prévu, mais apparaîtra sous les éléments float. Peut-être qu’un exemple en image expliquera mieux que des mots.

Dans l'exemple, la barre latérale flotte vers la droite (float: right;) et sa hauteur est inférieure à la zone de contenu principale. Par conséquent, le pied de page sera surélevé car il a suffisamment de hauteur et le comportement flottant l'exige. Pour résoudre le problème, il doit définir la propriété clear, qui garantit que l'élément est affiché sous les éléments float.

#footer ( clair : les deux ; )

La propriété clear peut avoir quatre valeurs. Les deux, les plus couramment utilisés, servent à annuler le flottement de chaque direction. Gauche et Droite - utilisés pour annuler le flottement d'une des directions. Aucun - par défaut, généralement non utilisé sauf si clear est nécessaire. hedge serait la cinquième valeur, mais elle n'est étrangement pas prise en charge dans Internet Explorer. Annuler simplement un flottement gauche ou droit est beaucoup moins courant, mais a certainement son utilité.

Grand effondrement

Une autre chose étonnante à propos de la propriété float est que son utilisation peut affecter l'élément parent. Si un tel élément ne contient que des éléments flottants, alors il s'effondre littéralement, c'est-à-dire que sa hauteur est nulle. Cela n'est pas toujours perceptible à moins que l'élément parent n'ait une sorte d'arrière-plan visible.

Cet effondrement semble illogique, mais l’alternative est encore pire. Considérez cet exemple :

Si l'élément block en haut s'agrandit automatiquement pour accueillir tous les éléments float, nous nous retrouverons avec un espace non naturel dans le texte entre les paragraphes, sans aucun moyen de le corriger. Si tel était le cas, nos concepteurs se plaindraient beaucoup plus souvent de ce comportement que de l'effondrement.

Ainsi, la réduction est presque toujours nécessaire pour éviter les difficultés de mise en page. Pour modifier ce comportement, vous devez ajouter un élément d'annulation float après les éléments float, mais avant de fermer l'élément parent.

Façons d'annuler le flottement

Si vous savez qu'après les éléments float, un autre élément (par exemple, un pied de page) sera toujours affiché, il vous suffit alors de définir la propriété clear : Both; , comme dans l'exemple ci-dessus, et continuez à faire votre propre truc. C’est idéal car cela ne nécessite aucun hack ni élément supplémentaire. Bien sûr, tout dans notre vie ne se déroule pas aussi bien et il y a des moments où cette méthode ne suffit pas. Par conséquent, il est nécessaire d’avoir plusieurs méthodes supplémentaires dans votre arsenal.

• Méthode div vide. Un div littéralement vide est utilisé.
  . Parfois un élément peut être utilisé à sa place
  ou autre, mais div est utilisé le plus souvent car par défaut, il n'a pas de style, pas d'objectif particulier et il est peu probable qu'un style général lui soit appliqué via CSS. Les fans de balisage sémantiquement pur n'aimeront peut-être pas cette méthode, car la présence d'un div vide n'a aucune signification contextuelle et n'est placée sur la page que pour des raisons de conception. Bien sûr, à proprement parler, ils ont raison, mais il fait son travail et ne fait de mal à personne.
• Méthode de débordement. Basé sur le fait que l'élément parent doit définir la propriété overflow. Si cette propriété est définie sur auto ou Hidden , l'élément parent se développera pour accueillir tous les éléments float. Cette méthode semble sémantiquement plus correcte puisqu’elle ne nécessite pas d’éléments supplémentaires. Cependant, si vous deviez utiliser un autre div uniquement pour utiliser cette approche (c'est-à-dire le div parent), alors ce serait la même chose que l'exemple précédent d'ajout d'un div vide. N'oubliez pas non plus que la propriété overflow a un objectif différent. Soyez prudent et ne laissez pas une partie de votre contenu disparaître ou des barres de défilement inutiles apparaître.
• Méthode de nettoyage simple. Cette méthode utilise le merveilleux pseudo-sélecteur CSS :after. Bien mieux que d'utiliser le débordement sur l'élément parent. Vous lui donnez simplement une classe supplémentaire, déclarée comme ceci : .clearfix:after ( content: "."; visibilité: caché; affichage: bloc; hauteur: 0; clair: les deux; ) Cette méthode ajoute du contenu invisible et annule le flotteur Et en passant, ce n'est pas toute l'histoire sur la façon dont le code supplémentaire devrait être utilisé dans les anciens navigateurs.

Et comme vous le comprenez, chaque méthode est utilisée dans des situations différentes. Prenons, par exemple, une grille d'éléments de blocs de différents types.

Pour une meilleure présentation visuelle, il serait bien de combiner des blocs similaires. Par exemple, nous voulons que chaque type commence sur une nouvelle ligne, dans notre cas le type d'élément est déterminé par la couleur. Nous pouvons utiliser la méthode de débordement ou la « méthode de compensation simple » si chaque groupe possède son propre élément conteneur. Ou nous pouvons utiliser la méthode div vide entre chacun des groupes. Trois éléments de conteneur ou trois div vides, ce qui convient le mieux à votre tâche dépend de vous.

Problèmes avec les flotteurs

Les gens essaient souvent de contourner les flotteurs car ils doivent être utilisés avec beaucoup de soin. La plupart des bugs sont venus avec IE6. Alors que de plus en plus de concepteurs Web cessent de prendre en charge IE6, ces problèmes ne vous inquiètent peut-être pas. Mais pour ceux que ça intéresse, voici une courte liste.

Alternatives au flottement

Si vous avez besoin de texte pour entourer une image, il n’y a pas d’alternative. Mais pour la mise en page, il existe certainement des choix. Il existe des approches très intéressantes qui combinent la flexibilité du flottement avec la puissance du positionnement absolu. CSS3 a quelque chose qui s'appelle Module de mise en page du modèle, qui constituera une alternative intéressante au flottement à l’avenir.

Dans cet article, j'ai décidé d'analyser un problème qui survient parfois lors de la mise en page, et en même temps, il est très difficile de trouver une solution sur Internet. Dans cet article, nous analyserons le problème annulation partielle du flotteur en CSS, et je vais également vous montrer sa solution.

Alors, regardons ce code :

Blocs de gauche

Texte de l'article

#gauche (
bordure droite : 5px solide #000 ;
flotteur : gauche ;
hauteur : 400px ;
largeur : 200 px ;
}
#droite (
marge gauche : 220 px ;
}
#image de droite (
flotteur : gauche ;
}

Quelle était notre tâche ? Faire 2 colonnes : la colonne de gauche contient du contenu, la colonne de droite contient un article. Et cet article a une photo avec flotteur : gauche ;(identique au bloc de gauche). Ensuite, nous voulons afficher un bloc avec des informations sur l'article, bien sûr nous ne voulons pas que ces informations soient à droite de l'image. C'est pourquoi nous ajoutons effacer le bloc. Cependant, une surprise nous attend ici.

Non seulement il a été annulé flotteur : gauche ; près de la photo, mais aussi près du bloc de gauche. Ainsi, les informations sur l'article ont diminué, s'alignant sur la bordure inférieure du bloc de gauche (puisqu'elle est plus haute). Comment résoudre ce problème ? Très simple, juste un bloc #droite ajouter une propriété débordement:

#droite (
marge gauche : 220 px ;
débordement : caché ;
}

Maintenant, tout est mis en place. Propriété débordement est chargé d’afficher ce qui se trouve à l’extérieur du bloc. ET caché indique que seul ce qui se trouve à l’intérieur du bloc sera affiché et que tout le reste sera masqué. C'est cette propriété et cette valeur qui nous permettent de résoudre le problème avec annulation partielle du float en CSS.