CSS-Layouttechniken – Floats, Clears und Legacy-Layouts: The Old School Cool

✨
Dieser Artikel ist Teil einer größeren Serie, die auf meiner eigenen Website verfügbar ist. Klicken Sie hier, um mehr über CSS 101: The Series zu erfahren. Es ist völlig kostenlos!

Willkommen zu einer Reise in die Vergangenheit! Bevor Flexbox und Grid wie die Superhelden des modernen Webdesigns Einzug hielten, gab es eine Zeit, in der Floats und Clears das CSS-Universum beherrschten. Wenn Sie ein Webdesign-Neuling sind, fragen Sie sich vielleicht: „Was zum Teufel sind Floats und Clears, und warum sollte mich das interessieren?“ Nun, schnallen Sie sich an, denn wir machen gleich eine nostalgische Reise durch die CSS-Geschichte.

Spoiler: Vielleicht finden Sie heute ein paar coole Tricks!

Floats: Der Original-Layout-Trickster

Stellen Sie sich float als den rebellischen Teenager der CSS-Welt vor, der immer aus der Reihe bricht und ein bisschen Chaos verursacht. Floats wurden ursprünglich entwickelt, um Text um Bilder zu wickeln, aber kluge Entwickler erkannten schnell, dass sie sie auch zum Erstellen von Layouts verwenden konnten.

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

Im obigen Beispiel float: left; Lässt das Bild nach links „schweben“, sodass der Text es umschließen kann. Floats waren eine beliebte Wahl zum Erstellen mehrspaltiger Layouts, bevor Flexbox und Grid auf den Markt kamen. Allerdings können sie etwas knifflig sein und bei unsachgemäßer Verwendung leicht zu Layoutproblemen führen.

Löscht: Die Friedenstruppen

Die Floats waren vielleicht etwas rebellisch, aber die Clears waren ihre Friedensstifter. Die klare Eigenschaft ist wie der Vermittler, der eingreift, um das Chaos zu lösen, das durch Floats verursacht werden könnte. Wenn Sie Floats verwenden und feststellen, dass sich Elemente überlappen oder sich nicht wie erwartet verhalten, kann Clear Abhilfe schaffen.

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

Durch das Hinzufügen einer Clearfix-Klasse mit dem oben genannten CSS stellen Sie sicher, dass alle schwebenden Elemente in ihrem übergeordneten Container enthalten sind. Dies ist eine praktische Möglichkeit, die lästigen Layoutfehler zu vermeiden, bei denen Elemente in den Abgrund zu verschwinden scheinen.

Die Legacy-Layouttechniken: Ein Retro-Revival

Bevor Flexbox und Grid im Rampenlicht standen, hatte CSS noch ein paar weitere Tricks im Ärmel. Hier ist ein Blick auf einige klassische Layouttechniken:

• Inline-Block: Eine einfache Methode zum Erstellen horizontaler Layouts. Indem Sie Elemente auf display: inline-block; festlegen, können Sie sie nebeneinander anordnen, ohne dass Floats erforderlich sind.

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

• Tabellenlayouts: Ja, Tabellen waren nicht nur für tabellarische Daten gedacht! Sie könnten display:table;, display:table-row; und display:table-cell; verwenden. um rasterartige Layouts zu erstellen.

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

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

Diese Methoden wurden von modernen Layouttechniken weitgehend in den Schatten gestellt, bieten aber dennoch einen Einblick in die Entwicklung des Webdesigns.

Moderne Anwendung: Alt und Neu mischen

Haben Floats und Clears also noch einen Platz in der Welt des modernen Webdesigns? Absolut! Während Flexbox und Grid heute die bevorzugten Tools zum Erstellen von Layouts sind, können Floats und Clears in bestimmten Szenarios, wie einfachen Layouts oder bei der Arbeit mit Legacy-Code, immer noch nützlich sein.

Zum Beispiel könnten Sie Floats zum Umbrechen von Text verwenden oder wenn Sie eine kleine Anzahl von Elementen auf einfache Weise ausrichten möchten. Aber für komplexe, reaktionsfähige Layouts sind Flexbox und Grid Ihre besten Freunde.

Zum Abschluss

Floats, Clears und andere veraltete Layouttechniken mögen wie Relikte aus der Vergangenheit erscheinen, aber sie sind Teil der reichen Geschichte von CSS. Wenn Sie sie verstehen, erhalten Sie eine solide Grundlage und können die Leistungsfähigkeit moderner Layoutsysteme besser einschätzen. Darüber hinaus kann es nützlich sein, diese altmodischen Tricks zu kennen, wenn man sich mit älteren Projekten oder skurrilen Designherausforderungen (oder diesen gefürchteten Vorstellungsgesprächen) beschäftigt.

Viel Spaß beim Codieren!

✨
Psst! Wenn Ihnen das, was Sie gelesen haben, gefallen hat, sollten Sie hier klicken, um CSS 101: The Series auszuprobieren. Es ist völlig kostenlos!

Das obige ist der detaillierte Inhalt vonCSS-Layouttechniken – Floats, Clears und Legacy-Layouts: The Old School Cool. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!