CSS Eigenschaft float : das CSS Float-Modell anwenden

Grundlagen: CSS Float-Modell

Normalerweise werden Block-Elemente nicht nebeneinander angeordnet, sondern beginnen immer in einer neuen Zeile und nehmen immer die gesamte Breite des übergeordneten Blocks (Eltern-Element) ein. Möchte man mehrere Blöcke horizontal nebeneinander anordnen, kann man dafür die CSS-Eigenschaft float (= Deutsch: schweben) nutzen.

CSS-Eigenschaft: float

Beschreibungmögliche WerteStandardwertKategorie
Element Fließrichtungleft
right
none
initial
inherit
nonePositionierung

Die Angabe in oranger Schrift ist die Standardanwendung dieser CSS-Eigenschaft.

Die Funktionsweise der CSS-Eigenschaft »...«float ist eigentlich nicht besonders kompliziert, aber beim »Floaten« von Elementen können Probleme auftreten, die vor allem für Einsteiger nicht immer leicht zu verstehen sind.

Mit der Eigenschaft kann man festlegen, in welche Richtung ein Element verschoben wird. Erlaubt sind folgende Werte:

Alternative zu float

Mit display: inline-block kannst du eine Box erzeugen, die die Eigenschaften von Inline und Block-Boxen kombiniert. Inline-Elemente liegen wie Text auf einer Grundlinie und haben wie die Wörter im Text einen Abstand. Mit den Eigenschaften margin und padding kann der Abstand der Elemente individuell konfiguriert werden.

Beispiel CSS/* Bild-Container */
figure {
/* Anzeige als Inline-Element */
display: inline-block;
}


/* Abstände definieren */
figure, figcaption {
/* kein Außenabstand für alle Seiten */
margin: 0;

/* kein Innenabstand für alle Seiten */
padding: 0;
}


/* Bildgröße definieren */
figure img {
/* Bildbreite 240 Pixel */
width: 240px;
}
Beispiel HTML<div class="inline-pics">
<figure>
<img src="/images/godafoss.jpg" alt="Godafoss, Island">
<figcaption>Bildquelle: Pixabay.com<br>Godafoss, Island</figcaption>
</figure>

<figure>
<img src="/images/island.jpg" alt="Island">
<figcaption>Bildquelle: Pixabay.com<br>Island</figcaption>
</figure>

<figure>
<img src="/images/wasserfall.jpg" alt="Wasserfall">
<figcaption>Bildquelle: Pixabay.com<br>Wasserfall</figcaption>
</figure>
</div>
Ausgabe des HTML-Codes
Godafoss, Island
Bildquelle: Pixabay.com
Godafoss, Island
Island
Bildquelle: Pixabay.com
Island
Wasserfall
Bildquelle: Pixabay.com
Wasserfall

Dieser Hintergrund       repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.

Hast du den Abstand zwischen den drei Bildern bemerkt? Obwohl der Innenabstand und Außenabstand 0 ist, gibt zwischen den Bildern einen kleinen Abstand. Der Grund dafür ist ein Leerzeichen zwischen den <figure>-Tags. Das ist vergleichbar mit den Leerzeichen in einem Text.