{"id":5367,"date":"2024-08-27T17:05:19","date_gmt":"2024-08-27T17:05:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/elements-flottants-css-guide-essentiel\/"},"modified":"2024-08-27T17:05:22","modified_gmt":"2024-08-27T17:05:22","slug":"elements-flottants-css-guide-essentiel","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/elements-flottants-css-guide-essentiel\/","title":{"rendered":"5.4 \u00c9l\u00e9ments Flottants en CSS : Guide Essentiel"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les \u00e9l\u00e9ments flottants en CSS<\/strong> sont essentiels pour la mise en page et la disposition des \u00e9l\u00e9ments dans le design web. Comprendre comment utiliser les <strong>\u00e9l\u00e9ments flottants en CSS<\/strong> vous permettra de cr\u00e9er des mises en page complexes et r\u00e9actives. D\u00e9couvrez comment ma\u00eetriser cette fonctionnalit\u00e9 gr\u00e2ce \u00e0 ce guide d\u00e9taill\u00e9 et des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00e9l\u00e9ments flottants en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586319139?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n \n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n \n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n \n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) {\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n \n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n \n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n \n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play();\n    }\n});\n<\/script>\n\n\n\n<p>Les \u00e9l\u00e9ments flottants en CSS permettent de positionner un \u00e9l\u00e9ment \u00e0 gauche ou \u00e0 droite de son conteneur, tout en laissant le contenu affluer autour de lui. Cette technique est fr\u00e9quemment utilis\u00e9e pour cr\u00e9er des mises en page avec des textes qui entourent des images ou des menus de navigation en colonnes. Voyons comment cela fonctionne en d\u00e9tail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Introduction aux Propri\u00e9t\u00e9s de Float en CSS<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>float<\/code> en CSS permet de d\u00e9finir la fa\u00e7on dont un \u00e9l\u00e9ment doit \u00eatre positionn\u00e9 par rapport \u00e0 son conteneur. Les valeurs principales pour cette propri\u00e9t\u00e9 sont <code>left<\/code>, <code>right<\/code>, et <code>none<\/code> (valeur par d\u00e9faut). Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\nimg {\n    float: left; \/* Positionne l'image \u00e0 gauche *\/\n    margin: 20px; \/* Ajoute des marges autour de l'image *\/\n}\n \np {\n    text-align: justify; \/* Aligne le texte pour entourer l'image *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Clear pour G\u00e9rer les \u00c9l\u00e9ments Flottants<\/h3>\n\n\n\n<p>Lorsque vous utilisez des \u00e9l\u00e9ments flottants, il est parfois n\u00e9cessaire de d\u00e9sactiver l&rsquo;effet de flottement pour certains \u00e9l\u00e9ments suivants. La propri\u00e9t\u00e9 <code>clear<\/code> permet d&rsquo;\u00e9viter que les \u00e9l\u00e9ments suivants flottent autour de l&rsquo;\u00e9l\u00e9ment flottant. Les valeurs possibles sont <code>left<\/code>, <code>right<\/code> et <code>both<\/code>. Voici comment l&rsquo;utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n.clearfix:after {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n \nimg {\n    float: right;\n    margin: 20px;\n}\n \np {\n    clear: both;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er des Layouts Complexes avec les \u00c9l\u00e9ments Flottants<\/h3>\n\n\n\n<p>Les \u00e9l\u00e9ments flottants peuvent \u00eatre utilis\u00e9s pour cr\u00e9er des mises en page complexes, comme des mises en page \u00e0 plusieurs colonnes. Voici un exemple o\u00f9 nous allons cr\u00e9er une mise en page en trois colonnes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n.column {\n    float: left;\n    width: 33.33%; \/* Chaque colonne prend 1\/3 de la largeur de la page *\/\n    padding: 10px;\n}\n \n.container::after {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n\/* HTML *\/\n&lt;div class=\"container\"&gt;\n  &lt;div class=\"column\"&gt;Colonne 1&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;Colonne 2&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;Colonne 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Flottants pour une Disposition Mobile<\/h3>\n\n\n\n<p>Pour rendre vos mises en page flottantes responsives, vous pouvez utiliser des media queries pour ajuster les largeurs des colonnes sur de petits \u00e9crans. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS pour les \u00e9crans larges *\/\n.column {\n    float: left;\n    width: 33.33%;\n    padding: 10px;\n}\n \n.container::after {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n \n\/* CSS pour les petits \u00e9crans *\/\n@media screen and (max-width: 600px) {\n    .column {\n        width: 100%; \/* Les colonnes prennent 100% de la largeur de la page *\/\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>Ceci est particuli\u00e8rement important pour s&rsquo;assurer que votre site web reste lisible et accessible sur tous les types de dispositifs.<\/p>\n\n\n<!-- Ajoutant du contenu additionnel pour atteindre la longueur requise -->\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Flottants en CSS<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension des \u00e9l\u00e9ments flottants, voici quelques exemples avanc\u00e9s qui illustrent comment ces flottants peuvent \u00eatre utilis\u00e9s dans des mises en page complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er un Menu de Navigation avec des \u00c9l\u00e9ments Flottants<\/h4>\n\n\n\n<p>Un exemple courant d&rsquo;utilisation des \u00e9l\u00e9ments flottants est la cr\u00e9ation de menus de navigation. Voici un exemple de code pour cr\u00e9er un menu horizontal flottant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n.navbar {\n    width: 100%;\n    background-color: #333;\n    overflow: hidden;\n}\n \n.navbar a {\n    float: left;\n    display: block;\n    color: white;\n    text-align: center;\n    padding: 14px 20px;\n    text-decoration: none;\n}\n \n.navbar a:hover {\n    background-color: #ddd;\n    color: black;\n}\n \n\/* HTML *\/\n&lt;div class=\"navbar\"&gt;\n  &lt;a href=\"#home\"&gt;Home&lt;\/a&gt;\n  &lt;a href=\"#about\"&gt;About&lt;\/a&gt;\n  &lt;a href=\"#contact\"&gt;Contact&lt;\/a&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Disposition de Grille avec des Flottants<\/h4>\n\n\n\n<p>Les flottants peuvent \u00e9galement \u00eatre utilis\u00e9s pour cr\u00e9er des dispositions de type grille. Voici un exemple pour une galerie d&rsquo;images :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS *\/\n.column {\n    float: left;\n    width: 25%;\n    padding: 5px;\n}\n \n.row::after {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n \n\/* HTML *\/\n&lt;div class=\"row\"&gt;\n  &lt;div class=\"column\"&gt;&lt;img src=\"img1.jpg\" alt=\"Image 1\"&gt;&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;&lt;img src=\"img2.jpg\" alt=\"Image 2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;&lt;img src=\"img3.jpg\" alt=\"Image 3\"&gt;&lt;\/div&gt;\n  &lt;div class=\"column\"&gt;&lt;img src=\"img4.jpg\" alt=\"Image 4\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Alternative Moderne : Flexbox et Grid<\/h3>\n\n\n\n<p>Bien que les \u00e9l\u00e9ments flottants soient toujours utiles, CSS Flexbox et CSS Grid sont des alternatives modernes qui offrent plus de flexibilit\u00e9 et de contr\u00f4le pour la mise en page. Apprenez comment utiliser <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\" target=\"_blank\" rel=\"noopener\">Flexbox<\/a> et <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener\">Grid<\/a> pour simplifier vos designs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>\u00e9l\u00e9ments flottants en CSS<\/strong> restent un outil pr\u00e9cieux pour la mise en page des sites web, m\u00eame avec l&rsquo;av\u00e8nement de Flexbox et Grid. Ils permettent de positionner et d&rsquo;agencer des \u00e9l\u00e9ments avec pr\u00e9cision et flexibilit\u00e9. Avec une compr\u00e9hension claire de leur fonctionnement et des techniques connexes, telles que l&rsquo;utilisation de clear et les media queries, vous serez en mesure de cr\u00e9er des dispositions de page web \u00e0 la fois \u00e9l\u00e9gantes et fonctionnelles. Pour plus de tutoriels sur CSS et d\u2019autres technologies de d\u00e9veloppement web, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours complet sur HTML5 et CSS3<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les \u00e9l\u00e9ments flottants en CSS sont essentiels pour la mise en page et la disposition des \u00e9l\u00e9ments dans le design web. Comprendre comment utiliser&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2725,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5367"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5367\/revisions"}],"predecessor-version":[{"id":5368,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5367\/revisions\/5368"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2725"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}