Anne  de Morel

Anne de Morel

1661027400

Une Plongée Profonde Dans La Propriété Flottante CSS

CSS floatest une propriété de positionnement qui place un élément à gauche ou à droite de son conteneur et permet aux éléments en ligne de s'enrouler autour de lui. Dans le passé, floatil a acquis une mauvaise réputation car il était utilisé à mauvais escient pour la mise en page. Cela a conduit certains développeurs à se demander s'il est désormais obsolète ou s'il doit être complètement évité !

CSS floatest toujours d'actualité. Nous devrions simplement l'utiliser dans le bon contexte ! Cet article traite de l'histoire du flottant CSS et montre plusieurs façons qui floatpeuvent être utilisées dans la conception Web moderne pour obtenir des mises en page de texte créatives et des éléments de conception époustouflants.

Une brève histoire defloat

La floatpropriété a été introduite dans CSS pour permettre aux développeurs Web de créer des mises en page de style magazine, comme avoir une image positionnée à l'intérieur d'une colonne de texte avec le texte qui l'entoure, similaire à la mise en page illustrée ci-dessous.

Image dans le texte

Exemple d'utilisation floatavec une image dans une colonne de texte.

La floatpropriété a été introduite lorsque CSS était un bébé. Il est difficile de dire quand exactement, mais floatc'était certainement dans les navigateurs en 2001 ! A cette époque, CSS était très limité ! Lorsque les gens voulaient faire des mises en page pleine page, ils cherchaient souvent float. C'était le Far West à l'époque !

Exemple de grille CSS

Flexbox ou CSS Grid sont recommandés pour les mises en page pleine page comme celles-ci.

À certains égards, l'utilisation floatde mises en page a fonctionné. Cependant, les larmes suivaient généralement car cela impliquait une utilisation floatau-delà de son objectif prévu, entraînant des problèmes de code et de mise en page compliqués qui étaient difficiles à gérer à mesure que le site Web évoluait.

De nos jours, ne l'utilisez tout simplement pas floatpour les mises en page ! Vous devez considérer l'utilisation des flottants de cette manière comme une technique héritée . Flexbox et CSS Grid sont des options largement supérieures pour créer des mises en page complexes .

Utiliser floatcorrectement

À utiliser floatlorsque vous souhaitez tirer un élément sur le côté d'un élément conteneur tout en permettant à d'autres contenus de circuler librement autour de lui. Il n'y a pas d'autres méthodes CSS pour accomplir cela, alors n'ayez pas peur de l'utiliser !

Les valeurs valides pour floatsont un seul mot-clé de la liste suivante :

  • left: positionne l'élément sur le côté gauche de son bloc contenant
  • right: positionne l'élément sur le côté droit de son bloc contenant
  • none: ne fait pas flotter l'élément
  • inline-start: positionne l'élément sur le premier côté en ligne de son bloc contenant ; c'est le côté gauche avec des scripts de gauche à droite et le côté droit avec des scripts de droite à gauche
  • inline-end: positionne l'élément sur le dernier côté en ligne de son bloc contenant ; c'est le côté droit avec des scripts de gauche à droite et le côté gauche avec des scripts de droite à gauche

Les valeurs inline-startet inline-endsont relativement nouvelles. Elles sont appelées valeurs logiques . Nous devrions favoriser leur utilisation maintenant. La prise en charge du navigateur est bonne et ces valeurs logiques créent des conceptions plus inclusives.

Les valeurs logiques nous permettent de créer la mise en page correcte pour les langues avec différentes directions d'écriture avec une seule valeur. Les valeurs logiques les plus couramment utilisées sont leftet right. Les exemples qui suivent présentent des valeurs logiques moins couramment utilisées pour illustrer comment celles-ci peuvent être utilisées dans différents cas d'utilisation.

Implémentons l'exemple précédent. Créons un simple articlequi a une image flottante au début du deuxième paragraphe.

<article>
      <h1>England youngsters reaping the rewards of a pathway at Under-19 Euros</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
        voluptatem incidunt voluptas nobis placeat facilis commodi laboriosam
        similique id veritatis molestias, dignissimos praesentium, autem tenetur
        consequatur beatae itaque. Ipsa, iure.
      </p>
      <img src="img/players.jpg" alt="generic photo of men playing football" />
      <p>
        Mollitia delectus sit expedita nobis, nostrum est porro soluta earum
        accusamus! Architecto quae quas aliquid voluptatum rem alias voluptate
        quo quidem, delectus adipisci ipsum sunt maxime officia esse magni
        inventore?
      </p>
      <!--more paragraphs -->
</article>

Nous avons juste besoin d'ajouter le style suivant au img:

img {
    float: inline-start;
}

Par défaut, il n'y a pas d'espace entre l'image et le texte. Vous souhaiterez probablement ajouter une marge pour fournir une séparation claire entre l'image et le texte. J'ai ajouté margin-inline-end: 4px;.

https://codepen.io/robatronbobby/pen/xxWxgje

Si nous avons utilisé exactement le même CSS mais avec du contenu arabe dans notre document HTML, il sera aligné à droite au lieu de gauche :

https://codepen.io/robatronbobby/pen/ExExZZe

Assez simple, non ?

Les utilisations courantes de floatdevraient vraiment être aussi simples. Cependant, il existe certaines bizarreries associées à l'utilisation floatque vous pouvez rencontrer dans différents scénarios. En approfondissant notre compréhension de cette propriété, nous pouvons éviter des résultats déroutants !

Visualiser un élément flottant

Soyons parfaitement clairs sur le comportement des éléments flottants.

Prenons notre exemple précédent, la version anglaise. L'élément avec l' floatensemble dessus (l' imgélément dans ce cas) est retiré du flux de mise en page normal du document et collé sur le côté gauche de son conteneur parent (le article, dans ce cas).

Tout contenu qui se trouve sous l'élément flottant dans le flux de mise en page normal s'enroule désormais autour de l'élément à la place. Ce faisant, il remplira tout l'espace à droite de l'élément flottant. Ensuite, il s'arrête et le flux de mise en page normal continue.

Pour illustrer cela, modifions notre exemple. Nous ajouterons une surbrillance aux paragraphes concernés pour illustrer le flux de documents, comme ceci :

Rembourrage d'image

Démo d'image flottante avec remplissage ajouté à l'image et texte de paragraphe en surbrillance.

Voici le CodePen pour cet exemple .

Dans cet exemple, nous en avons ajouté paddingpour imgcréer un espace supplémentaire autour de celui-ci, afin que vous puissiez voir toutes les dimensions des paragraphes. En ajoutant background-color:orange;aux deuxième, troisième et quatrième paragraphes, il est plus évident qu'ils occupent toute la largeur du conteneur article. Cependant, le contenu du paragraphe est poussé vers le côté opposé par l'image flottante.

Comprendre les particularités des flotteurs

Quelque chose qui peut sembler inhabituel floatest qu'un parent contenant des éléments flottants va s'effondrer. Pour comprendre ce que je veux dire par là, faisons un exemple plutôt artificiel. Créons un sectionqui contient deux éléments flottants.

Ici, deux imgflottaient au début du conteneur :

<section>
  <img src="img/1.jpg" alt="generic photo of footballers duelling for ball">
  <img src="img/2.jpg" alt="pitch overview">
</section>

<style>
  img {
    width: 300px;
    float: inline-start;
    margin-inline-end: 10px;
  }
</style>

Si nous n'ajoutons rien de plus au section, il aura une hauteur de zéro !

En ce moment, ça ressemble à ça :

Élément de section avec deux images

Un sectionélément contenant deux images flottantes.

Si vous inspectez le sectionavec les DevTools du navigateur, vous pouvez confirmer les dimensions affichées dans l' onglet Mise en page : 900 px de largeur x 0 px de hauteur.

Dimensions de la section

Dimensions de la section affichées dans l'onglet Disposition de DevTools.

Cependant, il est très peu probable que vous créiez un jour un parent qui n'a que des éléments flottants ! Alors, pourquoi avez-vous besoin de savoir cela ?

Eh bien, nous vivons dans un monde où la loi de Murphy , « tout ce qui peut mal tourner, ira mal », s'avère plus souvent vraie que quiconque ne le souhaiterait ! Des choses peuvent arriver, et si c'est le cas, vous vous grattez peut-être la tête en vous demandant pourquoi votre mise en page a l'air bizarre !

Désactivation des éléments flottants CSS avecclear

La propriété CSS clearest une propriété complémentaire de float. Vous pouvez l'utiliser lorsque vous souhaitez que certains éléments soient libres de l'influence des éléments flottants. Vous pouvez définir un élément pour qu'il soit « effacé » d'un côté ou des deux côtés. L'élément effacé sera déplacé sous tous les éléments flottants qui le précèdent.

La clearpropriété a un ensemble de valeurs similaire àfloat :

  • none: l'élément n'est pas déplacé vers le bas pour effacer les éléments flottants passés
  • left: l'élément est déplacé vers le bas pour effacer les flotteurs de gauche passés
  • right: l'élément est déplacé vers le bas pour effacer les flotteurs de droite passés
  • both: l'élément est déplacé vers le bas pour passer les flotteurs gauche et droit
  • inline-start : l'élément est déplacé vers le bas pour effacer les flottants du côté de départ de son bloc contenant ; c'est-à-dire que la gauche flotte sur les scripts de gauche à droite et la droite flotte sur les scripts de droite à gauche
  • inline-end : l'élément est déplacé vers le bas pour effacer les éléments flottants à l'extrémité de son bloc contenant ; c'est-à-dire que la droite flotte sur les scripts de gauche à droite et la gauche flotte sur les scripts de droite à gauche

À titre d'exemple, vous trouverez ci-dessous une page d'article de site Web contenant des images flottantes. Vous remarquerez qu'il y a une image flottante vers le bas de l'article, qui chevauche le pied de page de la page Web.

La deuxième image flottante chevauche le pied de page

Une deuxième image flottante chevauche le pied de page.

Pour résoudre ce cas particulier, nous pouvons ajouter clear: inline-end;ou clear: right;au footer.

Si nous voulons empêcher que cela se produise complètement, nous pouvons utiliser à la clear:both;place.

.no-floats {
    clear:both;
}

Pour voir ce code en action, consultez le CodePen ci-dessous. Vous pouvez basculer la no-floatsclasse sur le footerpour voir son effet.

https://codepen.io/robatronbobby/pen/ExExZZe

Voyons maintenant quelques exemples supplémentaires.

Exemple CSS floatavec clear: Pull quote

L'exemple le plus courant est peut-être un devis tiré. Une citation tirée est l'endroit où une citation intéressante est tirée du texte et présentée comme une grande citation en médaillon. Les publications d'actualités et les magazines sur papier glacé ont tendance à le faire pour donner une idée de ce dont l'article traite dans différentes sections.

https://codepen.io/robatronbobby/pen/vYRYZoK

Exemple CSS floatavec clear: lettrine

Dans certains livres et mises en page de magazines, vous pouvez trouver un style unique appliqué à la lettre initiale du premier mot du paragraphe. Il peut être plus grand que le texte qui l'entoure et avoir un style différent. Parfois, cette lettre est appelée lettrine.

En CSS, le ::first-letterpseudo-élément peut être utilisé pour styliser la première lettre d'un élément. Si nous créons une lettre initiale plus grande, nous voudrons peut-être la faire flotter au début du bloc et faire en sorte que les lignes de texte suivantes s'enchaînent autour d'elle.

Vous trouverez ci-dessous un exemple dans lequel nous rendons la lettre initiale beaucoup plus grande que le reste du texte du paragraphe et la faisons flotter au début du bloc.

https://codepen.io/robatronbobby/pen/zYWYpGQ

Pour apprécier comment ce type de style peut rehausser une mise en page, regardez les lettrines de ce design de magazine de voyage par Bartosz Kwiecień :

Exemple de lettrines

Soyez créatif avecshape-outside

Jusqu'à présent, tous nos exemples ont impliqué des éléments flottants qui ont une forme rectangulaire. Les éléments suivent le modèle de boîte et ont des boîtes englobantes rectangulaires. Cependant, nous ne sommes pas confinés à une seule forme ; avec la shape-outsidepropriété, nous pouvons créer toutes sortes de formes sympas qui peuvent affecter le flux de texte !

Nous pouvons fournir une image comme valeur pour shape-outside. La forme flottante est calculée en fonction du canal alpha de l'image spécifiée, qui est définie par le shape-image-threshold. La valeur par défaut est 0,0 (entièrement transparent).

Pour cette raison, il n'est vraiment logique de l'utiliser shape-outsidequ'avec des formats d'image prenant en charge la transparence tels que PNG, SVG et WebP. Sinon, on aura toujours une forme rectangulaire !

Par exemple, disons que nous avons une image SVG qui a un seul pathqui est une étoile rouge avec un fond transparent. Voici à quoi ressemble l'utilisation shape-outsideavec cette image.

Forme-extérieur avec image

.star {
    width: 250px;
    float: left;
    shape-outside: url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
    shape-margin: 6px;
}

Ici, j'ai utilisé float: left;car, malheureusement, Chrome (Linux) semble avoir un problème avec l'utilisation float: inline-start;et shape-outsideensemble.

Il existe également une shape-marginpropriété qui nous permet d'ajuster la marge autour de la forme.

Nous pouvons fournir a <basic-shape>comme valeur à la shape-outsidepropriété avec les fonctions suivantes : , , , , ou . Ceux-ci sont définis dans la spécification CSS Shapes Module Level 1 . Si vous avez déjà utilisé la propriété, vous avez également utilisé ces fonctions.inset()()circle()ellipse()polygon()path()clip-path

Disons que nous voulons créer un divcercle gris et que le texte s'enchaîne autour de lui, comme dans l'image ci-dessous. Nous pouvons créer cela en utilisant floatavec shape-outside: circle().

Forme-hors cercle

Voici le CSS pour créer le cercle gris avec le texte flottant :

.circle {
        border-radius: 50%;
        height: 200px;
        width: 200px;
        background-color: grey;
        float: right;
        shape-outside: circle();
}

Vous pouvez omettre les valeurs de circle(). Dans notre cas, les valeurs par défaut des paramètres <radius>et nous donnent le résultat souhaité. <position>La valeur par défaut <position>est le centre du cercle.

Voici un CodePen avec les exemples d'étoile rouge et de cercle gris.

Exemple CSS floatavec shape-outside: Texte de l'entonnoir

Un autre exemple intéressant d'utilisation shape-outsideest d'avoir un élément flottant à gauche et à droite pour canaliser le texte.

Par exemple, vous pourriez avoir deux mains prenant presque le texte en coupe. Nous pourrions faire flotter l'image d'une main de chaque côté du paragraphe et donner au paragraphe une forme triangulaire en utilisant shape-outsidela polygon()fonction.

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Sometimes a web page’s text content appears to be
  funneling your attention towards a spot on the page
  to drive you to follow a particular link. Sometimes
  you don’t notice.
</p>

<style>
.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  height: 6em;
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  height: 6em;
  transform: rotateY(180deg);
}

p {
  text-align: center;
}
</style>Using a floated element with shape-outside on both sides.

Voici le CodePen qui l'accompagne :

https://codepen.io/robatronbobby/pen/MWVKrjm

Modification des formes CSS

Si vous vous demandez comment modifier les formes CSS, je vous recommande d'utiliser Firefox DevTools. Si vous cliquez sur la shape-outsidepropriété, vous verrez un symbole de "maille" bleu à côté, et il affichera le contour de la forme sur la page (comme indiqué ci-dessous).

Contour de la forme en surbrillance

Vous pouvez déplacer les points de contrôle (les cercles sur le chemin) et les modifier comme vous le feriez pour un chemin dans un éditeur graphique. Chrome DevTools n'offre pas la même fonctionnalité, à ma connaissance !

Si vous voulez plus d'exemples, Kristopher Van Sant a une collection CodePen qui regorge d'exemples.shape-outside

Pour voir comment une forme unique pourrait être utilisée dans une mise en page complète, consultez cette mise en page de magazine, toujours de Bartosz Kwiecień .

Revue de voyage

Conception du magazine de voyage par Bartosz Kwiecień.

En 2022, 95 % des navigateurs dans le monde prennent en charge la shape-outsidepropriété. Alors, n'ayez pas peur de tenter le coup !

Emballer

floatsemble être sous-utilisé dans le domaine du développement frontend d'aujourd'hui. Peut-être, c'est une victime du passé, quand il était souvent mal utilisé pour les mises en page, et les choses ont été confondues avec "n'utilisez pas de flottant". J'espère que je vous ai montré que cela floatest toujours pertinent et peut être utilisé pour créer des mises en page de texte intrigantes. J'aimerais voir les gens utiliser la floatpropriété plus fréquemment pour apporter plus de créativité sur le Web.

Source : https://blog.logrocket.com/deep-dive-css-float-property/

#css 

What is GEEK

Buddha Community

Une Plongée Profonde Dans La Propriété Flottante CSS
Anne  de Morel

Anne de Morel

1661027400

Une Plongée Profonde Dans La Propriété Flottante CSS

CSS floatest une propriété de positionnement qui place un élément à gauche ou à droite de son conteneur et permet aux éléments en ligne de s'enrouler autour de lui. Dans le passé, floatil a acquis une mauvaise réputation car il était utilisé à mauvais escient pour la mise en page. Cela a conduit certains développeurs à se demander s'il est désormais obsolète ou s'il doit être complètement évité !

CSS floatest toujours d'actualité. Nous devrions simplement l'utiliser dans le bon contexte ! Cet article traite de l'histoire du flottant CSS et montre plusieurs façons qui floatpeuvent être utilisées dans la conception Web moderne pour obtenir des mises en page de texte créatives et des éléments de conception époustouflants.

Une brève histoire defloat

La floatpropriété a été introduite dans CSS pour permettre aux développeurs Web de créer des mises en page de style magazine, comme avoir une image positionnée à l'intérieur d'une colonne de texte avec le texte qui l'entoure, similaire à la mise en page illustrée ci-dessous.

Image dans le texte

Exemple d'utilisation floatavec une image dans une colonne de texte.

La floatpropriété a été introduite lorsque CSS était un bébé. Il est difficile de dire quand exactement, mais floatc'était certainement dans les navigateurs en 2001 ! A cette époque, CSS était très limité ! Lorsque les gens voulaient faire des mises en page pleine page, ils cherchaient souvent float. C'était le Far West à l'époque !

Exemple de grille CSS

Flexbox ou CSS Grid sont recommandés pour les mises en page pleine page comme celles-ci.

À certains égards, l'utilisation floatde mises en page a fonctionné. Cependant, les larmes suivaient généralement car cela impliquait une utilisation floatau-delà de son objectif prévu, entraînant des problèmes de code et de mise en page compliqués qui étaient difficiles à gérer à mesure que le site Web évoluait.

De nos jours, ne l'utilisez tout simplement pas floatpour les mises en page ! Vous devez considérer l'utilisation des flottants de cette manière comme une technique héritée . Flexbox et CSS Grid sont des options largement supérieures pour créer des mises en page complexes .

Utiliser floatcorrectement

À utiliser floatlorsque vous souhaitez tirer un élément sur le côté d'un élément conteneur tout en permettant à d'autres contenus de circuler librement autour de lui. Il n'y a pas d'autres méthodes CSS pour accomplir cela, alors n'ayez pas peur de l'utiliser !

Les valeurs valides pour floatsont un seul mot-clé de la liste suivante :

  • left: positionne l'élément sur le côté gauche de son bloc contenant
  • right: positionne l'élément sur le côté droit de son bloc contenant
  • none: ne fait pas flotter l'élément
  • inline-start: positionne l'élément sur le premier côté en ligne de son bloc contenant ; c'est le côté gauche avec des scripts de gauche à droite et le côté droit avec des scripts de droite à gauche
  • inline-end: positionne l'élément sur le dernier côté en ligne de son bloc contenant ; c'est le côté droit avec des scripts de gauche à droite et le côté gauche avec des scripts de droite à gauche

Les valeurs inline-startet inline-endsont relativement nouvelles. Elles sont appelées valeurs logiques . Nous devrions favoriser leur utilisation maintenant. La prise en charge du navigateur est bonne et ces valeurs logiques créent des conceptions plus inclusives.

Les valeurs logiques nous permettent de créer la mise en page correcte pour les langues avec différentes directions d'écriture avec une seule valeur. Les valeurs logiques les plus couramment utilisées sont leftet right. Les exemples qui suivent présentent des valeurs logiques moins couramment utilisées pour illustrer comment celles-ci peuvent être utilisées dans différents cas d'utilisation.

Implémentons l'exemple précédent. Créons un simple articlequi a une image flottante au début du deuxième paragraphe.

<article>
      <h1>England youngsters reaping the rewards of a pathway at Under-19 Euros</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
        voluptatem incidunt voluptas nobis placeat facilis commodi laboriosam
        similique id veritatis molestias, dignissimos praesentium, autem tenetur
        consequatur beatae itaque. Ipsa, iure.
      </p>
      <img src="img/players.jpg" alt="generic photo of men playing football" />
      <p>
        Mollitia delectus sit expedita nobis, nostrum est porro soluta earum
        accusamus! Architecto quae quas aliquid voluptatum rem alias voluptate
        quo quidem, delectus adipisci ipsum sunt maxime officia esse magni
        inventore?
      </p>
      <!--more paragraphs -->
</article>

Nous avons juste besoin d'ajouter le style suivant au img:

img {
    float: inline-start;
}

Par défaut, il n'y a pas d'espace entre l'image et le texte. Vous souhaiterez probablement ajouter une marge pour fournir une séparation claire entre l'image et le texte. J'ai ajouté margin-inline-end: 4px;.

https://codepen.io/robatronbobby/pen/xxWxgje

Si nous avons utilisé exactement le même CSS mais avec du contenu arabe dans notre document HTML, il sera aligné à droite au lieu de gauche :

https://codepen.io/robatronbobby/pen/ExExZZe

Assez simple, non ?

Les utilisations courantes de floatdevraient vraiment être aussi simples. Cependant, il existe certaines bizarreries associées à l'utilisation floatque vous pouvez rencontrer dans différents scénarios. En approfondissant notre compréhension de cette propriété, nous pouvons éviter des résultats déroutants !

Visualiser un élément flottant

Soyons parfaitement clairs sur le comportement des éléments flottants.

Prenons notre exemple précédent, la version anglaise. L'élément avec l' floatensemble dessus (l' imgélément dans ce cas) est retiré du flux de mise en page normal du document et collé sur le côté gauche de son conteneur parent (le article, dans ce cas).

Tout contenu qui se trouve sous l'élément flottant dans le flux de mise en page normal s'enroule désormais autour de l'élément à la place. Ce faisant, il remplira tout l'espace à droite de l'élément flottant. Ensuite, il s'arrête et le flux de mise en page normal continue.

Pour illustrer cela, modifions notre exemple. Nous ajouterons une surbrillance aux paragraphes concernés pour illustrer le flux de documents, comme ceci :

Rembourrage d'image

Démo d'image flottante avec remplissage ajouté à l'image et texte de paragraphe en surbrillance.

Voici le CodePen pour cet exemple .

Dans cet exemple, nous en avons ajouté paddingpour imgcréer un espace supplémentaire autour de celui-ci, afin que vous puissiez voir toutes les dimensions des paragraphes. En ajoutant background-color:orange;aux deuxième, troisième et quatrième paragraphes, il est plus évident qu'ils occupent toute la largeur du conteneur article. Cependant, le contenu du paragraphe est poussé vers le côté opposé par l'image flottante.

Comprendre les particularités des flotteurs

Quelque chose qui peut sembler inhabituel floatest qu'un parent contenant des éléments flottants va s'effondrer. Pour comprendre ce que je veux dire par là, faisons un exemple plutôt artificiel. Créons un sectionqui contient deux éléments flottants.

Ici, deux imgflottaient au début du conteneur :

<section>
  <img src="img/1.jpg" alt="generic photo of footballers duelling for ball">
  <img src="img/2.jpg" alt="pitch overview">
</section>

<style>
  img {
    width: 300px;
    float: inline-start;
    margin-inline-end: 10px;
  }
</style>

Si nous n'ajoutons rien de plus au section, il aura une hauteur de zéro !

En ce moment, ça ressemble à ça :

Élément de section avec deux images

Un sectionélément contenant deux images flottantes.

Si vous inspectez le sectionavec les DevTools du navigateur, vous pouvez confirmer les dimensions affichées dans l' onglet Mise en page : 900 px de largeur x 0 px de hauteur.

Dimensions de la section

Dimensions de la section affichées dans l'onglet Disposition de DevTools.

Cependant, il est très peu probable que vous créiez un jour un parent qui n'a que des éléments flottants ! Alors, pourquoi avez-vous besoin de savoir cela ?

Eh bien, nous vivons dans un monde où la loi de Murphy , « tout ce qui peut mal tourner, ira mal », s'avère plus souvent vraie que quiconque ne le souhaiterait ! Des choses peuvent arriver, et si c'est le cas, vous vous grattez peut-être la tête en vous demandant pourquoi votre mise en page a l'air bizarre !

Désactivation des éléments flottants CSS avecclear

La propriété CSS clearest une propriété complémentaire de float. Vous pouvez l'utiliser lorsque vous souhaitez que certains éléments soient libres de l'influence des éléments flottants. Vous pouvez définir un élément pour qu'il soit « effacé » d'un côté ou des deux côtés. L'élément effacé sera déplacé sous tous les éléments flottants qui le précèdent.

La clearpropriété a un ensemble de valeurs similaire àfloat :

  • none: l'élément n'est pas déplacé vers le bas pour effacer les éléments flottants passés
  • left: l'élément est déplacé vers le bas pour effacer les flotteurs de gauche passés
  • right: l'élément est déplacé vers le bas pour effacer les flotteurs de droite passés
  • both: l'élément est déplacé vers le bas pour passer les flotteurs gauche et droit
  • inline-start : l'élément est déplacé vers le bas pour effacer les flottants du côté de départ de son bloc contenant ; c'est-à-dire que la gauche flotte sur les scripts de gauche à droite et la droite flotte sur les scripts de droite à gauche
  • inline-end : l'élément est déplacé vers le bas pour effacer les éléments flottants à l'extrémité de son bloc contenant ; c'est-à-dire que la droite flotte sur les scripts de gauche à droite et la gauche flotte sur les scripts de droite à gauche

À titre d'exemple, vous trouverez ci-dessous une page d'article de site Web contenant des images flottantes. Vous remarquerez qu'il y a une image flottante vers le bas de l'article, qui chevauche le pied de page de la page Web.

La deuxième image flottante chevauche le pied de page

Une deuxième image flottante chevauche le pied de page.

Pour résoudre ce cas particulier, nous pouvons ajouter clear: inline-end;ou clear: right;au footer.

Si nous voulons empêcher que cela se produise complètement, nous pouvons utiliser à la clear:both;place.

.no-floats {
    clear:both;
}

Pour voir ce code en action, consultez le CodePen ci-dessous. Vous pouvez basculer la no-floatsclasse sur le footerpour voir son effet.

https://codepen.io/robatronbobby/pen/ExExZZe

Voyons maintenant quelques exemples supplémentaires.

Exemple CSS floatavec clear: Pull quote

L'exemple le plus courant est peut-être un devis tiré. Une citation tirée est l'endroit où une citation intéressante est tirée du texte et présentée comme une grande citation en médaillon. Les publications d'actualités et les magazines sur papier glacé ont tendance à le faire pour donner une idée de ce dont l'article traite dans différentes sections.

https://codepen.io/robatronbobby/pen/vYRYZoK

Exemple CSS floatavec clear: lettrine

Dans certains livres et mises en page de magazines, vous pouvez trouver un style unique appliqué à la lettre initiale du premier mot du paragraphe. Il peut être plus grand que le texte qui l'entoure et avoir un style différent. Parfois, cette lettre est appelée lettrine.

En CSS, le ::first-letterpseudo-élément peut être utilisé pour styliser la première lettre d'un élément. Si nous créons une lettre initiale plus grande, nous voudrons peut-être la faire flotter au début du bloc et faire en sorte que les lignes de texte suivantes s'enchaînent autour d'elle.

Vous trouverez ci-dessous un exemple dans lequel nous rendons la lettre initiale beaucoup plus grande que le reste du texte du paragraphe et la faisons flotter au début du bloc.

https://codepen.io/robatronbobby/pen/zYWYpGQ

Pour apprécier comment ce type de style peut rehausser une mise en page, regardez les lettrines de ce design de magazine de voyage par Bartosz Kwiecień :

Exemple de lettrines

Soyez créatif avecshape-outside

Jusqu'à présent, tous nos exemples ont impliqué des éléments flottants qui ont une forme rectangulaire. Les éléments suivent le modèle de boîte et ont des boîtes englobantes rectangulaires. Cependant, nous ne sommes pas confinés à une seule forme ; avec la shape-outsidepropriété, nous pouvons créer toutes sortes de formes sympas qui peuvent affecter le flux de texte !

Nous pouvons fournir une image comme valeur pour shape-outside. La forme flottante est calculée en fonction du canal alpha de l'image spécifiée, qui est définie par le shape-image-threshold. La valeur par défaut est 0,0 (entièrement transparent).

Pour cette raison, il n'est vraiment logique de l'utiliser shape-outsidequ'avec des formats d'image prenant en charge la transparence tels que PNG, SVG et WebP. Sinon, on aura toujours une forme rectangulaire !

Par exemple, disons que nous avons une image SVG qui a un seul pathqui est une étoile rouge avec un fond transparent. Voici à quoi ressemble l'utilisation shape-outsideavec cette image.

Forme-extérieur avec image

.star {
    width: 250px;
    float: left;
    shape-outside: url("https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg");
    shape-margin: 6px;
}

Ici, j'ai utilisé float: left;car, malheureusement, Chrome (Linux) semble avoir un problème avec l'utilisation float: inline-start;et shape-outsideensemble.

Il existe également une shape-marginpropriété qui nous permet d'ajuster la marge autour de la forme.

Nous pouvons fournir a <basic-shape>comme valeur à la shape-outsidepropriété avec les fonctions suivantes : , , , , ou . Ceux-ci sont définis dans la spécification CSS Shapes Module Level 1 . Si vous avez déjà utilisé la propriété, vous avez également utilisé ces fonctions.inset()()circle()ellipse()polygon()path()clip-path

Disons que nous voulons créer un divcercle gris et que le texte s'enchaîne autour de lui, comme dans l'image ci-dessous. Nous pouvons créer cela en utilisant floatavec shape-outside: circle().

Forme-hors cercle

Voici le CSS pour créer le cercle gris avec le texte flottant :

.circle {
        border-radius: 50%;
        height: 200px;
        width: 200px;
        background-color: grey;
        float: right;
        shape-outside: circle();
}

Vous pouvez omettre les valeurs de circle(). Dans notre cas, les valeurs par défaut des paramètres <radius>et nous donnent le résultat souhaité. <position>La valeur par défaut <position>est le centre du cercle.

Voici un CodePen avec les exemples d'étoile rouge et de cercle gris.

Exemple CSS floatavec shape-outside: Texte de l'entonnoir

Un autre exemple intéressant d'utilisation shape-outsideest d'avoir un élément flottant à gauche et à droite pour canaliser le texte.

Par exemple, vous pourriez avoir deux mains prenant presque le texte en coupe. Nous pourrions faire flotter l'image d'une main de chaque côté du paragraphe et donner au paragraphe une forme triangulaire en utilisant shape-outsidela polygon()fonction.

<img class="left" src="hand.svg"/>
<img class="right" src="hand.svg"/>
<p>
  Sometimes a web page’s text content appears to be
  funneling your attention towards a spot on the page
  to drive you to follow a particular link. Sometimes
  you don’t notice.
</p>

<style>
.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  height: 6em;
}

.right {
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  height: 6em;
  transform: rotateY(180deg);
}

p {
  text-align: center;
}
</style>Using a floated element with shape-outside on both sides.

Voici le CodePen qui l'accompagne :

https://codepen.io/robatronbobby/pen/MWVKrjm

Modification des formes CSS

Si vous vous demandez comment modifier les formes CSS, je vous recommande d'utiliser Firefox DevTools. Si vous cliquez sur la shape-outsidepropriété, vous verrez un symbole de "maille" bleu à côté, et il affichera le contour de la forme sur la page (comme indiqué ci-dessous).

Contour de la forme en surbrillance

Vous pouvez déplacer les points de contrôle (les cercles sur le chemin) et les modifier comme vous le feriez pour un chemin dans un éditeur graphique. Chrome DevTools n'offre pas la même fonctionnalité, à ma connaissance !

Si vous voulez plus d'exemples, Kristopher Van Sant a une collection CodePen qui regorge d'exemples.shape-outside

Pour voir comment une forme unique pourrait être utilisée dans une mise en page complète, consultez cette mise en page de magazine, toujours de Bartosz Kwiecień .

Revue de voyage

Conception du magazine de voyage par Bartosz Kwiecień.

En 2022, 95 % des navigateurs dans le monde prennent en charge la shape-outsidepropriété. Alors, n'ayez pas peur de tenter le coup !

Emballer

floatsemble être sous-utilisé dans le domaine du développement frontend d'aujourd'hui. Peut-être, c'est une victime du passé, quand il était souvent mal utilisé pour les mises en page, et les choses ont été confondues avec "n'utilisez pas de flottant". J'espère que je vous ai montré que cela floatest toujours pertinent et peut être utilisé pour créer des mises en page de texte intrigantes. J'aimerais voir les gens utiliser la floatpropriété plus fréquemment pour apporter plus de créativité sur le Web.

Source : https://blog.logrocket.com/deep-dive-css-float-property/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics