CSS - Eigenschaft Float: Ein Anfängerleitfaden

Hallo da draußen, zukünftige CSS-Zauberer! Heute tauchen wir ein in die magische Welt der CSS-Float-Eigenschaft. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast - bis zum Ende dieses Tutorials wirst du Elemente wie ein Profi schweben lassen können!

CSS - Float

Was ist die Float-Eigenschaft?

Bevor wir ins tiefe Wasser springen,fangen wir mit den Grundlagen an. Die Float-Eigenschaft ist wie ein magischer Zauberstab in CSS, der es Elementen ermöglicht, sich links oder rechts ihres Behälters zu schweben. Stell dir vor, du räumst Möbel in einem Raum an - die Float-Eigenschaft lässt dich Dinge an die Seiten schieben, sodass andere Elemente um sie herum fließen können.

Mögliche Werte

Die Float-Eigenschaft kann mehrere Werte annehmen, jeder mit seiner eigenen speziellen Kraft:

Wert	Beschreibung
left	Schwebt das Element nach links
right	Schwebt das Element nach rechts
none	Das Element schwebt nicht (Standard)
inherit	Erbt den Float-Wert vom Eltern-Element

Anwendungsbereich

Die Float-Eigenschaft kann auf die meisten HTML-Elemente angewendet werden, wird aber am häufigsten verwendet mit:

Bildern
Divs
Absätzen
Überschriften

Syntax

Hier ist die grundlegende Syntax für die Verwendung der Float-Eigenschaft:

auswahl {
float: wert;
}

Zum Beispiel:

img {
float: left;
}

Dies würde alle Bilder auf deiner Seite nach links schweben lassen.

CSS Float - Gleichbreite Spalten

Lassen wir mit einem praktischen Beispiel beginnen. Stell dir vor, du erstellst eine Website für eine Bäckerei und möchtest drei Arten von Pasteten nebeneinander anzeigen. So kannst du Float verwenden, um gleichbreite Spalten zu erstellen:

<div class="pastry-container">
<div class="pastry">Croissants</div>
<div class="pastry">Éclairs</div>
<div class="pastry">Macarons</div>
</div>

.pastry-container {
width: 100%;
}

.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}

In diesem Beispiel schweben wir jede Pasteten-Div nach links und geben ihr eine Breite von 33.33% (100% geteilt durch 3). Das box-sizing: border-box stellt sicher, dass die Innenabstandswerte in die Breitenberechnung einbezogen werden.

CSS Float - Gleichhohe Spalten

Nun, sagen wir, du möchtest diese Spalten unabhängig vom Inhalt gleich hoch haben. Wir können einen kleinen Trick mit Innenabstand und Außenabstand verwenden:

.pastry-container {
overflow: hidden;
}

.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}

Dies erzeugt die Illusion gleich hoher Spalten, indem ein großer Innenabstand nach unten hinzugefügt und ein gleichgroßer negativer Außenabstand nach unten verwendet wird.

CSS Float - Bilder nebeneinander

Fügen wir unserer Bäckerei-Website einige verführerische Pastetenbilder hinzu:

<div class="image-container">
<img src="croissant.jpg" alt="Croissant">
<img src="eclair.jpg" alt="Éclair">
<img src="macaron.jpg" alt="Macaron">
</div>

.image-container {
width: 100%;
}

.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}

Dies zeigt unsere Pastetenbilder nebeneinander an, wobei jedes ein Drittel der Behälterbreite einnimmt.

CSS Float - Flexible Boxes

Was aber, wenn wir ein flexibleres Layout wünschen? Hier kommt Flexbox, der Superheld der modernen CSS-Layouts:

.pastry-container {
display: flex;
flex-wrap: wrap;
}

.pastry {
flex: 1 0 300px;
margin: 5px;
}

Dies erstellt ein flexibles Layout, bei dem jede Pastetenbox mindestens 300px breit ist und sich auf den verfügbaren Raum ausdehnt.

CSS Float - Navigationsmenü

Floats werden oft verwendet, um horizontale Navigationsmenüs zu erstellen. Lassen wir ein Menü für unsere Bäckerei zaubern:

<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#menu">Menü</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>

nav ul {
list-style-type: none;
padding: 0;
}

nav li {
float: left;
}

nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}

Dies erstellt ein horizontales Navigationsmenü, wobei jedes Element nach links schwebt.

CSS Float - Web-Layout

Floats können verwendet werden, um ganze Web-Layouts zu erstellen. Hier ist ein einfaches zweispaltiges Layout:

<div class="container">
<header>Willkommen in unserer Bäckerei</header>
<nav>
<!-- Navigations-elemente hier -->
</nav>
<main>
<article>Unsere Geschichte</article>
<aside>Heutiges Special</aside>
</main>
<footer>Kontaktieren Sie uns</footer>
</div>

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

header, nav, footer {
width: 100%;
clear: both;
}

main {
width: 100%;
}

article {
float: left;
width: 70%;
}

aside {
float: right;
width: 25%;
}

Dies erstellt ein Layout mit einem Hauptinhaltbereich und einer Seitenleiste.

CSS Float - Absatz

Floats können verwendet werden, um Text um Bilder herum zu schlingen:

<div class="content">
<img src="baker.jpg" alt="Unser Chef-Bäcker" class="float-left">
<p>Treffen Sie unseren Chef-Bäcker, Chef Pierre. Mit über 30 Jahren Erfahrung...</p>
</div>

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

Dies lässt den Text um das Bild unseres Chef-Bäckers herumlaufen.

CSS Float - Bilder mit Außenabstand

Dem schwebenden Bild Außenabstand hinzuzufügen kann die Lesbarkeit verbessern:

img {
float: left;
margin: 0 15px 15px 0;
}

Dies fügt unserem schwebenden Bild etwas Abstand hinzu.

CSS Float - Kein Schweben

Manchmal musst du verhindern, dass ein Element schwebt. Die clear-Eigenschaft kommt zur Rettung:

.no-float {
clear: both;
}

Dies stellt sicher, dass das Element mit der no-float-Klasse unter allen schwebenden Elementen erscheint.

CSS Float - Nach links oder rechts schweben

Denke daran, du kannst Elemente nach links oder rechts schweben lassen:

.float-left {
float: left;
}

.float-right {
float: right;
}

CSS Float - Überlappende Bilder

Sei vorsichtig! Schwebende Elemente können sich überlappen, wenn nicht genügend Platz ist. Du kannst dies mit richtiger Bereinigung verhindern:

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

Füge diese Klasse dem übergeordneten Behälter der schwebenden Elemente hinzu, um ein Überlappen zu verhindern.

CSS Float - Bilder nicht nebeneinander

Manchmal möchtest du, dass schwebende Bilder in ihrer ursprünglichen Reihenfolge bleiben:

img {
float: left;
clear: left;
}

Dies stellt sicher, dass jedes Bild auf einer neuen Zeile beginnt.

CSS Float - Unter Vorgänger schweben

Um Elemente unter ihre Vorgänger zu schweben:

.float-below {
clear: both;
float: left;
}

Dies bereinigt alle vorherigen Schwebungen und schwebt das Element.

CSS Float - Auf eine neue Zeile

Um ein Element nach schwebenden Elementen auf eine neue Zeile zu zwingen:

.new-line {
clear: both;
}

CSS Float - Verwandte Werte

Hier ist eine Tabelle der float-verwandten Eigenschaften und Werte:

Eigenschaft	Werte
float	left, right, none, inherit
clear	left, right, both, none, inherit
overflow	visible, hidden, scroll, auto

Und das war's, Leute! Du hast gerade deine ersten Schritte in die Welt der CSS-Floats gemacht. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Techniken zu experimentieren. Bereit zum Coden!

Credits: Image by storyset