CSS float – Positionieren und Umfließen

Für viele Jahre: Keine Sidebar ohne float

float eignet sich für individuelle Elemente wie ein schwebendes Bild, war aber vor allem viele Jahre die Grundlage für das Spalten-Raster (Grid) des Webdesigns.

Eigentlich war float nur für das Umfließen von Bildern im Text gedacht, aber float war viele Jahre Layout-Technik N^o1. Die Sidebar der Content Management Systeme war ohne float genauso wenig denkbar wie die Navigationsleiste. Heute machen Eigenschaften wie display:flow-root die Gestaltung der links oder rechts schwebenden Bilder einfacher und wir können kleine Kabinettstücke wie das Umfließen von Kreisformen einbauen und Texte damit beleben.

Für das Layout hingegen haben wir flexiblere Techniken für eine solide Positionierung von Layout-Blöcken: display flex und display grid. Insbesondere das Grid-Raster richtet den Grid-Container als auch die Elemente des Grid-Containers flexibel mit justify und align aus.

float:left, float: right bleibt die einfachste Lösung für das Logo neben dem Seitennamen und erfüllt mit shape-outside einen alten Wunsch vieler Webdesigner.

float ist irgendwie responsive

Auf großen Monitoren setzt float Blöcke nebeneinander – in der Zeit, bevor breakpoints mit media Queries zur Verfügung standen, war float der erster Hauch der Anpassungsfähigkeit an Monitorgrößen.

.float1 {
	min-width: 200px;
	float: left;
}
.float2 {
	float: left;
	height: 120px;
	width: calc(100% - 200px);
}

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.

Wenn Blöcke mit einer festen Breite und float innerhalb eines Blocks zu breit für den umfassenden Block werden, fallen sie automatisch untereinander. Das war vor dem Auftritt der mobilen Geräte und Media Queries der Erfolgsfaktor für float.

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.

.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>

float und center

float hat nur diese beiden Werte: float: left und float: right. Es gibt kein float: center und Blöcke mit float können nicht zentriert werden. 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.

Spalten gleicher Höhe

Ein Block mit float wird nur so hoch wie sein Inhalt. Wenn die Blöcke eine Hintergrundfarbe haben, sieht man den Höhenunterschied. Dann muss das Webdesign auf andere Techniken (z.B. display : table und display : table-cell) ausweichen oder mit kleinen Tricks für Spalten gleicher Höhe arbeiten.

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, sondern auf das Element, dass nach den schwebenden Blöcken folgt. 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 das Element unter den schwebenden Block. Dann läuft der Inhalt eines folgenden Blocks wieder über die gesamte Breite des umfassenden Blocks.

.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, clearfix und display: flow-root

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. Mit dem Aussterben der alten IE-Browser werden diese komplizierten Maßnahmen nicht mehr gebraucht.

Die modernste Technik nutzt CSS display: flow-root für den umfassenden Block und wird von allen modernen Browsern unterstützt.

<div style="display: flow-root">
	<div style="float:left">
		<img src="image.png" width="175" height="176" alt="…">
	</div>
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr ….
</div>

display: flow-root erklärt den umfassenden Block zum »Root« und zwingt ihn auf die Höhe der schwebenden Elemente.

CSS float Werte

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

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.