Das CSS Float-Modell
- Schriftart definieren
- Schriftgröße definieren
- Schriftfarbe definieren
- Textausrichtung
- Text-Dekoration
- Hintergrundfarbe definieren
- Schriftfarbe definieren
- Rahmen – Border
- HTML Farbnamen
- CSS Box-Modell
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- Art der Positionierung: Position
- Art der Darstellung: Display
- Außenabstand – Margin
- Innenabstand – Padding
- Rahmen – Border
- CSS Float Modell
- CSS Selektoren
- CSS Maßeinheiten
Inhaltsübersicht CSS Grundlagen
Eigenschaften für Text
Farben und Hintergründe definieren
Grundlagen Box-Modell?
Box-Positionierung
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.
| Beschreibung | mögliche Werte | Standardwert | Kategorie |
|---|---|---|---|
| Element Fließrichtung | <left> right none initial inherit | none | Positionierung |
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:
Mit float: left wird das Element an die linke Innenkante seines Eltern-Elements verschoben. Falls ausreichend Platz vorhanden ist, ordnen sich nachfolgende Elemente an der rechten Seite des Elements an. Sonst rutschen sie eine Zeile tiefer.
Mit float: right wird das Element an die rechte Innenkante seines Eltern-Elements verschoben. Nachfolgende Elemente werden nur dann an der linken Seite des Elements positioniert, wenn sie ebenfalls die Eigenschaft float:right haben.
float: none ist der Standard.
Wenn es nicht explizit im CSS-Code angegeben ist, floaten Elemente nicht. Mit »float: none« kann ggf. geerbtes Verhalten auf den Standard zurückgesetzt werden. Das Element beginnt wieder in einer neuen Zeile, wenn es ein Block-Element ist. Inline-Elemente beginnen an der „normalen“ Position im Fließtext.Bei float: inherit wird der Wert der float-Eigenschaft vom Eltern-Element geerbt.
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.
/* 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;
}<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>
Godafoss, Island
Island
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.