diff options
Diffstat (limited to 'files/fr/learn/css/css_layout/floats/index.html')
| -rw-r--r-- | files/fr/learn/css/css_layout/floats/index.html | 108 |
1 files changed, 36 insertions, 72 deletions
diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html index ffcc762cea..386185ea62 100644 --- a/files/fr/learn/css/css_layout/floats/index.html +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> +<p>À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> -<p>La propriété <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> -<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> +<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> <p>Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.</p> @@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p> - - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> -<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> +<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -92,11 +90,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Float_Example_1">Float Example 1</h6> +<h3>Faire flotter la boîte</h3> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<p>Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant <code>.box</code> :</p> + +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -124,10 +122,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> <p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (<code>left</code>) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.</p> @@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> +<h3>Visualiser le flottement</h3> -<div id="Float_2"> -<div class="hidden"> -<h6 id="Float_Example_2">Float Example 2</h6> +<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -181,10 +175,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> <p>Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.</p> @@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<div id="Float_3"> -<div class="hidden"> -<h6 id="Float_Example_3">Float Example 3</h6> - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -235,10 +223,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: left; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> <p>Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété <code>clear</code> accepte les valeurs suivantes :</p> @@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; }</pre> -<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> +<h3>Le problème</h3> -<div id="Float_4"> -<div class="hidden"> -<h6 id="Float_Example_4">Float Example 4</h6> +<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -307,10 +291,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> <p>Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.</p> @@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <code><div></code> en dessous avec la règle <code>clear: both</code>.</p> -<div id="Float_5"> -<div class="hidden"> -<h6 id="Float_Example_5">Float Example 5</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -371,10 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: block; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> <h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> @@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; }</pre> -<div id="Float_6"> -<div class="hidden"> -<h6 id="Float_Example_6">Float Example 6</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -427,10 +399,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> <p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.</p> @@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; }</pre> -<div id="Float_7"> -<div class="hidden"> -<h6 id="Float_Example_7">Float Example 7</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -483,28 +449,26 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> -<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> +<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> |