CSS, HTML und Javascript mit {stil}

CSS float • Positionieren

CSS float

CSS float setzt ein HTML-Element an den rechten oder linken Rand des umfassenden HTML-Blocks. float verdrängt den Text der folgenden Blöcke und ahmt so das Umfließen aus Quark, InDesign und Word nach.

float eignet sich für individuelle Elemente wie ein schwebendes Bild, ist aber auch die Grundlage für das Spalten-Raster (Grid) von HTML-Seiten.

Layout mit FloatHEADERFOOTERFLOAT 1FLOAT 2Container
.col:nth-child(1) { float: left; width: 30%; }
.col:nth-child(2) { float: right; width: 60%; }

Ein Element mit float wird nur so breit wie sein Inhalt, auch wenn es ein Block-Element ist. Elemente mit CSS float brauchen darum immer die Angabe der Breite durch width.

float und center

float hat nur diese beiden Werte: float: left und float: right. Es gibt kein float: center. Um Elemente – z.B. eine Seitennavigation mit next und prev – in der Mitte ihres Blocks zu zentrieren, eignet sich display: inline-block besser. Um die Spalten eines Layouts zu zentrieren, muss der umfassende Block selber zentriert werden. Erst display: flex ist eine solide Lösung für das Zentrieren von Spalten.

Blöcke mit float

float setzt Blöcke an den rechten oder linken Rand – typischerweise Logos, die Sidebar, Inhalt oder Bilder. Der übrige Platz bleibt frei und wenn weitere Elemente platziert werden, fließt ihr Inhalt in diesen freien Platz.

Die Lage im Text bestimmt die obere Kante des float-Elements. CSS margin legt den Abstand innerhalb des umfassenden Blocks fest.

Bild in einem Block mit CSS float
  • Link 1
  • Link 2
  • Link 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus.

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est.

.green { float: left; width: 30%; margin-right: 10px; }
…
<div class="green">
   <img src="…" width="…" />
   <ul> … </ul>
</div>

<section">Lorem ipsum dolor sit amet … </section>

<section>Aliquam tempus ipsum … </section>

clear nach float: Umfließen beenden

Mit float positionierte Elemente verdrängen den Inhalt der folgenden Blöcke. Die Höhe des float-Elements wird durch seinen Inhalt oder durch die Angabe von height bestimmt. Am Ende des float-Blocks laufen die folgenden Elemente wieder über die gesamte Breite des umfassenden Blocks.

CSS clear hebt zwar das Umfließen auf, aber clear wird nicht auf den umfassenden Block und auch nicht auf das floating Element selbst angewendet. Die Zusammenarbeit zwischen float und clear ist nicht gerade intuitiv.

Erst CSS clear für ein Element, das im HTML-Code auf einen float-Block folgt, zwingt den Block unter den schwebenden Block. Dann läuft der Inhalt eines folgenden Blocks wieder über die gesamte Breite des umfassenden Blocks.

  • Link 1
  • Link 2
  • Link 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus.

Aliquam tempus ipsum eget urna egestas sagittis. In nulla ligula, congue et, mollis nec, venenatis ut, est.

.green { float: left; margin-right: 10px; }
.setclear { clear: both; }
…
<div class="green">
   <img src="…" width="…" />
   <ul> … </ul>
</div>

<section">Lorem ipsum dolor sit amet … </section>

<section class="setclear">Aliquam tempus ipsum … </section>

Problematisch wird die Kombination aus float und clear in den Editoren der Content Management Systeme, wenn Autoren ohne CSS-Kenntnisse ihre Bild rechts oder links schweben lassen: Dann zeigen sich Absätze u.U. als Treppen.

float und clearfix

Wenn in einem Container nur Elemente mit float liegen, entsteht eine hinterhältige Falle: Die Höhe des umfassenden Containers collabiert.

Mit wachsender Erfahrung entstanden Gegenmaßnahmen: Zuerst setzte man ein div mit clear:both an das Ende des Containers, dann ein hr mit clear:both und visibility:hidden.

Die modernest Technik heißt clearfix:

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

clearfix ist die CSS Klasse für das umfassende Element. Das ist die einfachste und sicherste Methode im Umgang mit Blöcken, die Element mit CSS float enthalten. clearfix wird allerdings nicht für das floating Element selbst angesetzt, sondern für den umfassenden Block.

Für IE 6 / 7 brauchte das clearfix noch eine Erweiterung:

.clearfix {
  *zoom: 1;
}

Diese Erweiterung können wir uns heute sparen.

CSS float

Erblich: Nein

float
bestimmt, dass ein Element an den linken bzw. rechten Rand des umfassenden Elements versetzt wird – ähnlich dem "Umfließen" von Bildern im Satzprogramm und in der Textverarbeitung. float ist eine von zwei Eigenschaften, mit denen die Positionierung eines Elements gesteuert werden kann. Die andere Eigenschaft ist position.
Werte
left | right | none

Bilder und Texte, die eingebettet in Texten oder anderen Elementen dargestellt werden, werden als "schwebende Elemente" (floating elements) bezeichnet.

left
platziert ein Element auf der linken Seite des Textes.
right
platziert ein Element auf der rechten Seite des Textes.
none
ist die Vorgabe und stellt ein Element dort dar, wo es im Text steht.

Für eine Box mit CSS float:left oder float:right muss immer auch eine Breite angegeben werden, ansonsten würde das schwebende Element immer so breit wie der umfassende Block statt rechts oder links am Rand zu sitzen. Bei Bildern mit float ist die Breitenangabe im <img>-Tag bereits enthalten; bei schwebenden Texten muss die Breite explizit angegeben werden.

Bilder mit float

Image floating right Zu den klassischen Anwendungen von CSS float gehört das Umfließen von Bildern mit Text – ähnlich wie beim Layout in InDesign, Quark oder Word.

<style>
.right { 
   float: right;
   margin-left: 1em;
}
</style>
…
<p><img class="right" … /> Zu den klassischen Anwendungen …</p>

Initiale mit float

.initiale { 
    float: left; 
    font: normal 4em/110% Georgia, Times, serif; 
    color: maroon; 
    margin-right: 0.2em;
}
…
<p><span class="initiale">L</span>orem ipsum dolor sit amet, …

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras commodo imperdiet lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Hinweis: Die Initiale kann auch ohne Eingriff in den HTML-Code durch das Pseudoelement first-letter erzeugt werden.