Techniques de mise en page CSS – Flottants, espaces vides et mises en page héritées : The Old School Cool

✨
Cet article fait partie d’une série plus large disponible sur mon propre site Web. Cliquez ici pour en savoir plus sur CSS 101 : la série. C'est totalement gratuit !

Bienvenue dans une explosion du passé ! Avant que Flexbox et Grid ne s'imposent comme les super-héros de la conception Web moderne, il fut un temps où les flotteurs et les effacements régnaient sur l'univers CSS. Si vous êtes un débutant en conception de sites Web, vous vous demandez peut-être : "Que diable sont les flotteurs et les transparents, et pourquoi devrais-je m'en soucier ?" Eh bien, attachez votre ceinture, car nous sommes sur le point de faire un voyage nostalgique à travers l'histoire CSS.

Spoiler : vous trouverez peut-être quelques astuces sympas à utiliser aujourd'hui !

Flotteurs : le filou de la mise en page originale

Imaginez float comme l'adolescent rebelle du monde CSS - sortant toujours des limites et provoquant un peu de chaos. Les flotteurs ont été conçus à l'origine pour envelopper du texte autour d'images, mais des développeurs intelligents ont rapidement réalisé qu'ils pouvaient également les utiliser pour créer des mises en page.

img {
    float: left;
    margin-right: 15px;
}

Dans l'exemple ci-dessus, float: left; fait "flotter" l'image vers la gauche, permettant au texte de s'enrouler autour d'elle. Les flotteurs étaient un choix populaire pour créer des mises en page multi-colonnes avant l'arrivée de Flexbox et Grid. Cependant, ils peuvent être un peu capricieux et susceptibles de provoquer des problèmes de mise en page s'ils ne sont pas utilisés avec précaution.

Efface : Les Casques bleus

Les flotteurs étaient peut-être un peu rebelles, mais les clairs étaient leurs gardiens de la paix. La propriété clear est comme le médiateur qui intervient pour résoudre le chaos que les flotteurs pourraient créer. Si vous utilisez des flottants et constatez que des éléments se chevauchent ou ne se comportent pas comme prévu, clear peut vous aider.

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

En ajoutant une classe clearfix avec le CSS ci-dessus, vous vous assurez que tous les éléments flottants sont contenus dans leur conteneur parent. C'est un moyen astucieux d'éviter ces problèmes de mise en page ennuyeux où les éléments semblent flotter dans l'abîme.

Les techniques de mise en page héritées : un renouveau rétro

Avant que Flexbox et Grid ne volent la vedette, CSS avait encore quelques tours dans son sac. Voici un aperçu de quelques techniques de mise en page classiques :

• Inline-Block : une méthode simple pour créer des mises en page horizontales. En définissant les éléments sur display: inline-block;, vous pouvez les aligner côte à côte sans avoir besoin de flotteurs.

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• Mise en page des tableaux : Oui, les tableaux n'étaient pas uniquement destinés aux données tabulaires ! Vous pouvez utiliser display: table;, display: table-row; et display: table-cell; pour créer des mises en page de type grille.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

Ces méthodes ont été largement éclipsées par les techniques de mise en page modernes, mais offrent tout de même un aperçu de l'évolution de la conception Web.

Application moderne : mélanger l’ancien et le nouveau

Alors, les flottants et les transparents ont-ils encore leur place dans le monde du web design moderne ? Absolument! Bien que Flexbox et Grid soient désormais les outils incontournables pour créer des mises en page, les flottants et les clears peuvent toujours être utiles dans certains scénarios, comme les mises en page simples ou lorsque vous travaillez avec du code existant.

Par exemple, vous pouvez utiliser des flottants pour l'habillage du texte ou lorsque vous souhaitez aligner un petit nombre d'éléments de manière simple. Mais pour les mises en page complexes et réactives, Flexbox et Grid sont vos meilleurs amis.

Envelopper le tout

Les flotteurs, les effacements et autres techniques de mise en page héritées peuvent sembler être des reliques du passé, mais ils font partie de la riche histoire du CSS. Les comprendre vous donne une base solide et vous aide à apprécier la puissance des systèmes de mise en page modernes. De plus, connaître ces astuces de la vieille école peut s'avérer utile lorsqu'il s'agit de projets plus anciens ou de défis de conception originaux (ou de ces redoutables séries d'entretiens).

Bon codage !

✨
Psst ! Si vous avez aimé ce que vous avez lu, vous devez cliquer ici pour consulter CSS 101 : la série. C'est totalement gratuit !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!