Die guten Seiten von float
Obwohl CSS uns mit position ein speziellen Mechanismus für die Positionierung zur Hand gegeben wurde, war float mehr als ein Jahrzehnt die eleganteste Alternative für die Gestaltung von Webseiten. float hatte sich für mehr als ein Jahrzehnt zur beliebtesten Technik für ein Layout-Raster entwickelt. Dabei war float : left, float : right ursprünglich nicht für die Positionierung gedacht, sondern für das klassische Bild von Text umfließen lassen. Und warum?
- weil float intuitiver ist und immer weniger unter Browserfehlern gelitten hat als position.
Heute sind sich die Browser sehr nah gekommen und die Browserfehler spielen kaum noch eine Rolle, aber position eignet sich nicht mehr für ein modernes Layout-Raster. - weil kleinere Blöcke aus Text und Bildern bei Änderungen der Seite den Zusammenhang behalten.
Blöcke mit float ändern ihre Position zusammen mit dem Text automatisch – sie fließen mit. - weil Bilder, Sidebar oder andere Blöcke an der linken oder rechten Seite ihres umfassenden Blocks und an der richtigen Position bleiben, egal wie lang die Blöcke werden.
- weil clear alles unter alle schwebenden Blöcke zwingt – ganz gleich, wie lang der vorangehende Block wird,
- weil Blöcke mit float an jeder beliebigen Stelle des HTML-Dokuments auftauchen dürfen.
Bilder von Text umfließen lassen
float darf so ziemlich alles positionieren: Blockelemente wie Textabsätze und div-Blöcke genauso wie Inlineelemente, gleich ob Bilder oder ein kleines Icon in einem span.
<p style="float: left; width: 250px; "> <div style="float:left; width 300px"> <img style="float:left; margin-right: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.
Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna. Suspendisse ullamcorper ipsum. Duis tempus blandit eros. Aenean a leo. Vivamus posuere magna nec libero. Fusce ut odio. Morbi eget nunc. Maecenas eget ipsum vel pede vulputate adipiscing.
Schwebende Bilder halten auch in flexibel breiten Blöcken, wenn das Browserfenster verkleinert oder vergrößert wird.
<!DOCTYPE html>
<html lang="de">
<head>
<title> CSS-Eigenschaft float für Bilder </title>
<style>
body { margin: 0 9em; }
img { float: left; margin-right: 1em; }
</style>
</head>
<body>
<p> <img … width="240" height="182" />Lorem ipsum dolor …</p>
<p>In pharetra. Praesent aliquet neque. Integer … </p>
</body>
</html>
Wichtig! Damit z.B. eine Überschrift unter dem Text wieder in Form kommt – sprich: wieder am rechten Rand beginnt, muss style="clear: both;" für das HTML-Element (z.B. h3 { clear: both; }) notiert werden.
Spalten-Layout mit CSS float
Auf diese Weise lassen sich auch HTML-Blöcke für das Layout der Seite für große Monitore nebeneinander setzen. Wenn das Browserfenster kleiner ist oder die Auflösung nicht für alle Spalten reicht, kollabieren die Spalten und erscheinen untereinander.
.float1 {
float: left; }
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.
.float2 {
float: left; }
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.
In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.
.float3 {
float: left; }
Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh. Pellentesque a est sit amet nulla laoreet bibendum.
@media (min-width: 500px) {
.float1,
.float2,
.float3 {
float:left;
width:30%;
}
}
<div class="floatpack1"> <div class="float1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.</p> </div> <div class="float2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.</p> <p>In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.</p> </div> <div class="float3"> <p>Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh. Pellentesque a est sit amet nulla laoreet bibendum.</p> </div> </div>
CSS float wurde schnell für viele Jahre zur beliebtesten Methode des Webseiten-Layouts, denn float kann unseren Besuchern mit großen Monitoren ein Drei- oder Vier-Spalten-Layout bieten, während das Layout für Besucher mit kleinen Monitoren zu einem Zwei-Spalten-Layout mutiert.
Seit IE11 unterstützen die modernen Browser display: flex – das Layout von mehreren Blöcken in einer oder mehr Zeilen. display: flex ist einfacher als float, braucht keine Tricks und Hacks wie das clearfix-Hack und anspruchslos beim HTML-Markup.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.
In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.
Quisque quis neque. Donec eu risus. Praesent ut sapien. Fusce semper dolor vel libero. Quisque tincidunt rhoncus nibh. Pellentesque a est sit amet nulla laoreet bibendum.
display: flex für den Container setzt alle direkten Kind-Elemente automatisch in Spalten einer Zeile, lässt sich leicht zentrieren und gibt allen Spalten ebenso automatisch dieselbe Höhe.
.flexbox {
display: flex;
justify-content: space-around;
}
CSS float: Treppen beim Umfließen von Bildern
Wenn Textabsätze mit links oder rechts schwebenden Bildern kürzer als das Bild mit float sind, entstehen in den folgenden Textblöcken Stufen.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.
In pharetra
In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.
Damit der folgende Absatz wieder bis an den rechten (oder linken Rand rutscht), braucht er ein clear.
clear weist vier Werte auf: left, right, both und none. clear: right als Stil für die Überschrift sorgt dafür, dass eine Überschrift so weit nach unten geschoben wird, dass sie unter einem rechts schwebenden Element landet und wieder bis zur äußerst rechten Seite des umfassenden Blocks läuft.
CSS clear: float beenden
CSS clear: left schiebt ein Element so weit nach unten, dass es unter einem links schwebenden Element steht, clear: both versetzt das Element sowohl unter rechts als auch unter links schwebende Boxen. Wenn die CSS-Eigenschaft float in einem Dokument benutzt wird, definiert man z.B. alle Überschriften vorsichtshalber mit der Eigenschaft clear: both, damit sie nicht neben schwebenden Blöcken, sondern immer unter ihnen landen.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi placerat varius tortor. Ut dolor eros, pharetra vel, imperdiet condimentum, tincidunt ac, urna.
In pharetra
In pharetra. Praesent aliquet neque. Integer in felis nec libero eleifend tincidunt.
<style type="text/css" media="screen">
img { float: right; margin-left: 1em; }
h3 {clear: right; }
</style>
…
<h3><img … width="150" height="163" /> Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, … </p>
<h3><img … width="150" height="120" /> In pharetra</h3>
<p>In pharetra. Praesent aliquet neque. … </p>
…
Das Umfließen von Bildern ist auf responsiven Webseiten komplex. Wir müssen das Verhältnis zwischen Bildern und Text im Auge behalten, wenn die Seite auf einem kleinen Monitor angezeigt wird.
Wenn Bilder vom Text umflossen werden sollen, ist es besser, CSS float erst bei größeren Viewports anzuwenden (dazu mehr unter CSS Media Queries).
float vs inline-block vs display:flex
Positionieren mit CSS float war lange Zeit das Lieblingsinstrument der Front-End-Entwickler. Aber die kleinen Fallen und das Frickeln mit dem clearfix endet mit einem zuverlässigen Browser-Support für display: flex und display: grid.
Ein weiterer Vorteil von display: flex ist, dass Blöcke unterhalb von display: flex automatisch gleich hoch bzw. gleich breit sind.
display:flow-root
Ein neuer Wert für CSS display für den umfassenden Block könnte das Ende des clearfix bedeuten und die Verwendung von float : left und float : right vereinfachen: display : flow-root.
In einem Block mit flow: root, damit am Ende der Inhalt unter dem schwebenden Inhalten und dem Text an ihrer Seite wieder am Seitenrand anfängt.
Alles wieder an den Rand gesetzt?
<div class="flow-root">
<div class="floatingrabbit">Roger Rabbit</div>
<p>In einem Block mit flow : root</p>
</div>
CSS mit display: flow-root
.flow-root {
display: flow-root;
}
.item {
float: left;
}
display : flow-root wird von Chrome und Firefox unterstützt, nicht aber von Internet Explorer, Edge und Safari. Lang lebe der Clearfix!
