CSS : Positionnement et mise en page

Arrêter la flottaison

Testez gratuitement nos 1250 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faire flotter les éléments est souvent pratique, mais contrôler l'arrêt de cette flottaison est très utile. Vous verrez quelques-unes des méthodes qui s'adapteront à divers contextes et situations.
06:14

Transcription

Un souci fréquemment rencontré lorsqu'on utilise la flotaison, c'est que puisque les éléments qui flottent sont sortis du flux, quelque part, tout le flux qui suit essaye de s'engouffrer dans la place qui reste. Donc, ici on le voit sur cet exemple où une section contenant un certain nombre d'images qui flottent, ici les images sont bien en flotaison gauche, le paragraphe qui suis la section essaye de s'engouffrer autour de ces images, et en plus on s'aperçoit que l'élément container, donc, l'élément section qui contient ces images qui est lui-même coloré ne colore pas l'intégralité, n'encapsule pas l'intégralité de ces images. Alors, nous allons voir au travers de quelques exemples plusieurs approches qui vont nous permettre d'arrêter cette flotaison et de corriger les soucis non souhaités, comme par exemple ici, le non recouvrement par le parent de tous ses enfants. La méthode la plus rapide et directe ici à ce niveau-là, ça serait de simplement dire, l'overflow, donc, le déplacement de ce container ici, quel doit-il être ? Eh bien on va dire, on va le cacher, et donc le fait de dire on va cacher cet élément-là, automatiquement, le parent va recalculer la dimension en tenant compte cette fois-ci de ses enfants qui flottent et va pouvoir donc englober l'intégralité de ses enfants et de ce fait restituer le cassement de cette flotaison ici avec la rupture avec cette flotaison. Et donc le paragraphe qui suit ne va pas s'adapter à la suite de la flotaison. Une deuxième possibilité va être de dire, en fait on va le faire en dur, on va venir ici rajouter un élément de type div, je vais mettre une classe qui sera arreteflotaison et ici, cette classe arreteflotaison on va venir la définir, et on va mettre simplement un clear, propriété clear. Alors on pourrait mettre soit both, comme ça on dit attention, on va arrêter de flotter quel que soit le côté dans lequel l'élément qui le précède flotte, soit on va pouvoir aussi avoir une précision qui serait clear et on pourrait dire left ou right en fonction, on pourrait peut-être laisser de continuer à flotter à gauche ou laisser continuer de flotter à droite et inversement sur la gauche. Donc après, c'est vous qui voyez. Dans le cas de both, on est sûr d'arrêter la flotaison. Dans le cas d'une précision à apporter, on peut venir le définir au niveau de la propriété clear. Par contre, petit problème. Ça nous demande d'intervenir dans la structure de notre document et de rajouter cet élément qui ne sert strictement à rien d'autre que d'arrêter une flotaison. Une troisième possibilité, va être de dire, attention l'élément qui suit, là, le paragraphe, on pourrait lui demander tout simplement d'arrêter de flotter. Donc ce clear je vais pas rajouter un élément puisque j'en ai un qui suis. Je vais pouvoir lui dire clear: left, ici, ou on aurait pu dire clear: both et il va arrêter de flotter. Parfait ! L'élément arrête de flotter mais cela ne corrige pas l'erreur ici de la partie haute, dans le cas où il y en ait besoin donc il va quand même falloir venir ici au niveau de la section faire un overflow. Comme on avait vu que l'overflow faisait également l'arrêt de flotaison c'est presque double emploi à ce niveau-là. Mais voilà, vous pouvez demander à l'élément qui suit dans certains cas, toi arrête-toi de flotter, tout simplement, et le job sera fait, s'il n'y a pas nécessité d'englober des enfants comme ça par le container parent. Une autre possibilité va être de dire : eh bien attends, si au lieu de rajouter comme ici, un div à la fin de l'image, pourquoi en fait ce div, qu'est-ce qu'il fait ? Il fait ni plus ni moins que d'apporter ici un arrêt de flotaison qui est un clear. Je vais pouvoir l'ajouter sur une pseudo-classe ici. Je peux venir demander par exemple img, alors je pourrais dire le dernier élément moi ce que j'aime bien dire, c'est préciser dans certains cas, parce qu'il pourrait y avoir un autre élément dans le container section qui serait un paragraphe, qui serait quoi que ce soit qui ne devrait pas flotter derrière l'image donc je préfère utiliser un img : last-of-type, pour être sûr que c'est bien ma dernière image puisque c'est elle en fin de compte qui flotte ici je vais pouvoir lui dire tout simplement clear : both mais ça ne va pas vraiment suffire. La dernière s'est arrêtée de flotter, super. Donc, en fait puisque la dernière s'est arrêtée de flotter, elle sort de ce flux, parfait, mais en fin de compte elle ne flotte pas, elle non plus. Elle est toujours flottante quelque part, indirectement. De part cette propriété-là, on lui a simplement dit, tu vas arrêter de flotter toi. Mais là si je lui dis maintenant, float:none je lui dis, mais toi tu ne flottes pas, tu n'as plus de flotaison. À ce moment-là, elle ne se met plus à flotter. Donc, elle nettoie sa flotaison et elle s'intègre dans le flux en cassant directement celui qui est dessus. Une autre méthode qui peut être utilisée toujours sur la pseudo-classe, c'est de se dire, je vais utiliser un pseudo-élément content, que je vais fabriquer avec la pseudo-after cette fois-là. Donc ici, je vais l'appliquer sur section ici, je ferais une section pseudo-after. Et dans cette section-là. Qu'est-ce que je vais demander ? Je vais simplement venir créer un content. Ce content ça sera une espace insécable, une espace vide ici. Je vais lui dire que je ne veux pas le voir, visibility:hidden, je le cache. Comme ça, il ne me causera pas de soucis au niveau de son affichage d'un décalage éventuel. Ici, je vais pouvoir lui dire, un display: block je veux l'afficher sous forme de bloc. De ce fait, puisqu'il est en forme de bloc, il ne va pas être de type inline puisque n'oublions pas que c'est une espace. Je vais lui donner une hauteur de 0 et je vais lui demander de faire le clear:both c'est-à-dire ce que j'attends de lui, ce nettoyage de flotaison. Donc on vient de créer un pseudo-élément qui est invisible, qui est caché, qui n'a pas de hauteur, et qui va pouvoir à ce moment-là, être le nettoyeur, en quelque sorte, placé à l'abri. Donc plusieurs techniques qui vont répondre à divers cas, diverses situations, divers contextes, mais qui vont nous permettre de pouvoir maitriser correctement l'arrêt de cette flotaison qui pourrait être gênante dans certaines situations.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !