CSS/Tutorials/Ausrichtung/float und clear
Text-Info
- 30min
- mittel
- Grundkenntnisse in
Die Eigenschaft float nimmt ein Element aus dem normalen Elementfluss heraus und verschiebt es an die linke oder rechte Innenkante seines Elternelements. Es bleibt aber grundsätzlich für die Anordnung der übrigen Elementinhalte relevant, diese fließen um das gefloatete Element herum.
Dies ermöglicht eine individuelle, ansprechende Gestaltung, kann aber auch zu Komplikationen führen.
Beispielsweise kann es geschehen, dass das gefloatete Element aus seinem Container hinausragt und Inhalte an unerwünschten Stellen verschiebt. Es gibt unterschiedliche Möglichkeiten, damit umzugehen.
Inhaltsverzeichnis
float
Die Eigenschaft float legt fest, in welche Richtung ein Element verschoben wird. Erlaubt sind dabei folgende Werte:
-
none: Standardwert; das Element wird nicht verschoben. -
left: Das Element wird nach links verschoben. -
right: Das Element wird nach rechts verschoben. -
inherit: Der Wert derfloat-Eigenschaft des Elternelements wird geerbt.
Die neue CSS Logical Properties and Values Spezifikation ergänzt diese Schlüsselworte:
-
inline-start: Das Element wird entgegen der Richtung der Inline-Achse verschoben. In einer von links nach rechts geschriebenen Sprache ist dies gleichbedeutend mitleft. -
inline-end: Das Element wird in Richtung der Inline-Achse verschoben. In einer von links nach rechts geschriebenen Sprache ist dies gleichbedeutend mitright.
Wird durch die Eigenschaft float ein Element verschoben, so wird dieses Float genannt. Ein Float wird durch die margin-box eines Elements definiert, es werden also stets die Außenkanten berücksichtigt.
Ausgehend von der Position, die ein Element im normalen Elementfluss besessen hätte, wird ein Float soweit zur Seite verschoben, dass die entsprechende Kante seiner margin-box mit der Kante der content-box seines Elternelements übereinstimmt. Bei float:left also die linken Kanten und bei float:right die rechten Kanten. Eine Verschiebung nach oben oder unten findet dabei nicht statt.
Die Eigenschaft ist dafür gedacht, wie im Print-Layout Bilder oder andere Einschübe innerhalb des Fließtextes zu präsentieren:
img {
width: 10em;
}
.rechts {
float:right;
margin-left: 0.5em;
}
.links {
float:left;
margin-right: 0.5em;
}
Um zu veranschaulichen, wie sich ein Float in Bezug auf sein Elternelement verhält, wurden die <p>-Elemente im Beispiel mit einem Rahmen versehen.
Das oberste Bild ist unformatiert und wird daher als normales Inline-Element im Elementfluss dargestellt. Es bestimmt mit seiner Höhe die Zeilenhöhe der ersten Zeile.
Die folgenden Bilder wurden mit float aus dem normalen Elementfluss herausgenommen und „schweben“ nun am Rand. Das rechte Bild erhält über die Klasse rechts ein float nach rechts und mit margin-left einen Rand nach links zum Text. Wenn das Browserfenster breit genug ist, ist das Bild höher als der Text im Paragraphen. Es ragt nun aus seinem Elternelement unten hinaus und sogar in den Folgeparagraphen hinein. Der Browser berücksichtigt das und lässt den Text des Folgeparagraphen um den Float-Eindringling herumfließen.
Das linke Bild ist auf ähnliche Weise nach links gefloatet worden.
Floaten von Block-Elementen
Ein gefloatetes Element wird teilweise aus dem Elementfluss herausgelöst. Das bedeutet, dass ein Float - außer dass für ihn Platz reserviert wird - die Größe seines Elternelementes oder nachfolgender Blockelemente nicht beeinflusst.
Eine Auswirkung davon hast du schon gesehen: die Bilder im vorigen Beispiel konnten aus ihren Elternelementen nach unten hinausragen und sogar Text in nachfolgenden Elementen verdrängen. Wenn sämtliche Kind-Elemente eines Elements Floats sind (oder aus anderen Gründen dem Elementfluss entzogen wurden), kann das so weit führen, dass die content-box dieses Element eine Höhe von 0 bekommt. Ohne Padding und Border würde das Element dann visuell verschwinden.
Wenn ein Float ein nachfolgendes Blockelement überlagert, so verdrängt er, wie schon gesehen, dessen Inhalt. Das gilt im Standardfall nicht für Rand und Padding dieses Elements. Diese bleiben wo sie sind, die eigentliche Box wird vielleicht höher, weil ihr Inhalt verschoben wurde, aber nicht schmaler und sie wird auch nicht nach unten verschoben.
Das ändert sich, wenn das nachfolgende Element einen neuen Blockformatierungskontext erzeugt. Dies geschieht beispielsweise durch das Setzen der overflow-Eigenschaft auf einen anderen Wert als visible (der Default) oder clip. Floats ragen nicht in andere Blockformatierungskontexte hinein, statt dessen wird das ganze Element verschoben, das diesen Blockformatierungskontext erzeugt.
Das folgende Beispiel musst du möglicherweise in einem neuen Fenster öffnen, wenn das Vorschaufenster nicht hoch genug ist. Die Breite des <body>-Elements wechselt alle 3 Sekunden zwischen den Werten 22em, 34em und 46em, so dass die Auswirkung des gefloateten <img>-Elements auf seine Nachbarn abhängig vom verfügbaren Platz erkennbar wird.
img {
float:left;
margin-right: 0.5em;
width: 14em;
}
p {
margin-left: 1em;
padding-left: 5em;
overflow: visible; /* Defaultwert */
}
aside {
width: 20em;
overflow: auto; /* wirkt wie visible plus Blockformatierungskontext */
}
In diesem Beispiel steht das <img>-Element außerhalb des Textabsatzes. Durch den Float wird es zum Blockelement und fällt aus dem normalen Elementfluss heraus. Der Textabsatz wird durch das Bild teilweise verdeckt, was du an dem hinzugefügten Rahmen erkennen kannst, aber sein Inhalt wird nach rechts verdrängt und belegt dadurch mehr Zeilen. Der Abstand zwischen Bild und Textinhalt wird durch den margin-right des Bildes bestimmt. Der margin-left des Textabsatzes wird nach wie vor beachtet, wie du am Rahmen sehen kannst, aber das padding-left zeigt nur dort Wirkung, wo der Text nicht vom Bild verdrängt wird.
Das aside-Element hat eine feste Breite von 20em, die bei einer body-Breite von 46em neben das Bild passt. Der Browser zeigt das aside in der breitesten Stufe deshalb auch dort an. In den schmaleren Stufen 34em und 22em reicht der Platz nicht aus. Weil der Browser wegen des Blockformatierungskontextes nicht den Inhalt des aside verdrängen darf, verdrängt er das ganze aside in die einzige mögliche Richtung: nach unten. In der mittleren Breitenstufe bleibt deshalb eine Lücke neben dem Bild.
Durch den Blockformatierungskontext von overflow: auto kann verhindert werden, dass Blockelemente unter die Floats rutschen. Eine Lösung für eine responsive Platzverteilung bieten sie auch nicht.
Normalen Elementfluss nach einem Float wieder herstellen
Blockelemente werden normalerweise zum Teil von einem Float verdeckt. Mit Hilfe der clear-Eigenschaft kann festgelegt werden, ob ein Blockelement nur von links floatenden, nur von rechts floatenden oder von keinen floatenden Elementen verdeckt werden darf. Das geschieht dadurch, dass der normale Elementfluss (Blockelemente nehmen die gesamte Breite des Elternelementes ein und stehen infolgedessen untereinander) wieder hergestellt wird.
clear
Die Eigenschaft clear legt fest, auf welcher Seite ein Blockelement nicht von einem Float verdeckt werden darf.
Folgende Werte sind möglich.
-
none: Standardwert, das Element darf von nach links und nach rechts floatenden Elementen verdeckt werden. -
left: Das Element darf nicht von nach links floatenden Elementen verdeckt werden. -
right: Das Element darf nicht von nach rechts floatenden Elementen verdeckt werden. -
both: Das Element darf weder von nach links floatenden, noch von nach rechts floatenden Elementen verdeckt werden. -
inherit: Der Wert derclear-Eigenschaft des Elternelements wird geerbt.
Besitzt die Eigenschaft clear den Wert left, right oder both, kann über dem Element ein Freiraum namens Clearance eingefügt werden. Dies hat eine Vielzahl an Auswirkungen.
clear-Eigenschaft auch auf das br-Element in HTML angewendet werden, obwohl es sich dabei nicht um ein Blockelement handelt.Anwendungsbeispiele
Treppenstufen
Allerdings kann es bei der Positionierung mehrerer Bilder zu unschönen Treppenstufen kommen.[1] Da die Textabsätze nicht so hoch wie das rechts floatende Bild sind, richtet sich das nächste rechts schwebende Bild am vorherigen Bild und nicht wie gewünscht am rechten Rand aus.
img {
float: right;
width: 225px;
margin: 0.2em;
}
Ist Ihnen aufgefallen, dass die untere Erklärung nicht an den vorletzten Textabsatz anschließt, sondern soweit nach unten geschoben ist, dass sie wieder über die ganze Breite des Elternelements dargestellt werden kann?
Clearfix
Dies erreichst du, indem du mittels der CSS-Eigenschaft clear prüfst, ob sich die obere Rahmenkante eines Elements oberhalb der unteren Außenkante eines Floats befindet. Falls dies der Fall ist, gibst du dem nicht gefloateten Element eine Clearance, sodass das nächste gefloatete Element an der beabsichtigten Stelle positioniert wird.[2]
Am elegantesten ist es, die Clearance (oder Clearfix) einem Pseudoelement mitzugeben:
img {
float: right;
width: 225px;
margin: 0.2em;
}
p:after {
content: "";
display: block;
clear: both;
}
Mit CSS wird jedem Textabsatz ein leeres Pseudoelement mitgegeben, das die Höhe des gefloateten Vorgängerelements berücksichtigt.
flexible Breiten im responsiven Webdesign
Im responsiven Webdesign sollen Bilder (und der Rest der Webseite) auf jedem Bildschirm gut aussehen. Da die Gesamtbreite des verfügbaren Viewports nicht bekannt ist, kann man auch keine feste Breite vergeben. So würde ein 200px breites Bild auf einem Handy mit 20em breiten Viewport nur ca. 6em (≙≈ 100px) für den umfließenden Text lassen.
Deshalb ist es sinnvoll, Bildern per CSS zuerst die volle Breite und erst bei größeren Viewports einen festen oder relativen Wert zuzuweisen:
img {
width: 100%;
height: auto;
}
@media (min-width: 35em) {
img {
width: 50%;
}
img.rechts {
float: right;
margin-left: 0.5em;
}
img.links {
float: left;
margin-right: 0.5em;
}
}
@media (min-width: 50em) {
img {
width: 25%;
}
}
Das Bild erhält auf kleinen Bildschirmen die volle Breite.
Eine Medienabfrage an den Browser lässt das Bild bei einer Viewport-Breite von mehr als 35em auf die halbe Breite schrumpfen und mit float an die rechte oder linke Seite floaten (engl. für schweben, hängen). Passend dazu erhält es mit margin einen unteren und linken Abstand zum umfließenden Text.
Alternativen
Positionierung mit display: inline-block
Mit der CSS-Eigenschaft display: inline-block kannst du eine Box erzeugen, die Eigenschaften von Inline- und Block-Boxen kombiniert. Anstelle eines früher üblichen div-Elements verwenden wir im Beispiel das semantisch sinnvollere figure. (Weitere Beispiele für das Präsentieren von Bildern mit figure findest du in diesem Tutorial.)
figure, figcaption {
margin: 0;
padding: 0;
}
figure {
display: inline-block;
}
figure img {
width: 225px;
}
.oben {
vertical-align: top;
}
Inline-Elemente liegen wie Text auf einer Grundlinie. Deshalb ragt das höhere Bild nach oben weg. Durch vertical-align: top; kann man die Bilder auch am oberen Rand ausrichten.
Ist dir aufgefallen, dass die Bilder trotz eines auf 0 gesetzten Innen- und Außenabstands einen Abstand zum nächsten Bild haben? Inline-Elemente haben wie Wörter in einem Text einen Abstand, dessen Größe browserabhängig ist. Jedes Leerzeichen und jeder Zeilenumbruch führt so zu einem Abstand.
Eine Möglichkeit den Abstand zu vermeiden wäre es, nach dem schließenden Tag gleich das neue Element zu öffnen:
<figure>
<img src="Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>
...
</figcaption>
</figure><figure>
So entfällt das Leerzeichen und damit auch der Abstand.
Chris Coyier zeigt in diesem Artikel weitere Möglichkeiten wie das Weglassen der End-Tags oder das Setzen der Schriftgröße auf 0, was aber wieder andere Probleme nach sich ziehen kann[3].
Positionierung mit display: flex
Viel einfacher ist das Positionieren mit display:flex. Diese neue Anzeigeart besticht durch ihre Einfachheit:
section {
display: flex;
}
figure img {
width: 100%;
}
.verteilt {
align-items: center;
}
Die einzige feste Größe ist hier die Breite der Bilder, die die volle Breite des figure-Elements einnimmt. Die drei figure-Elemente verteilen sich gleichmäßig über die verfügbare Breite; Angaben zu margin und padding sind möglich, aber nicht nötig.
Quellen
- ↑ http://www.mediaevent.de/tutorial/css-positionieren-float.html
- ↑ http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss#clear
- ↑ https://css-tricks.com/fighting-the-space-between-inline-block-elements/
noch zu integrieren?
Verschiebung durch Clearance
Besitzt ein Element die Eigenschaft clear, wird geprüft, ob sich die obere Rahmenkante dieses Elements oberhalb der unteren Außenkante eines Floats befindet.
Ist das der Fall, so wird über dem Element ein Freiraum (englisch Clearance genannt) eingefügt. Das bedeutet, dass die obere Rahmenkante des clearenden Elements unter die untere Außenkante des Floats geschoben wird.
Die Wirkung der clear-Eigenschaft betrifft keine Floats, die sich innerhalb des clearenden Elements oder außerhalb der Block-Formatierungs-Umgebung befinden, in der sich das clearende Element befindet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für die Wirkung der clear-Eigenschaft auf floatende Elemente</title>
<style>
#float1 { float: left; width: 7em; height: 10em; margin-bottom: 1em; border: 3px solid blue; }
#float2 { float: right; width: 7em; height: 5em; margin-bottom: 1em; border: 3px solid blue; }
#inhalt { clear: right; border: 3px solid green; margin-top: 2em; background-color: lightgreen; }
</style>
</head>
<body>
<h1>Beispiel für die Wirkung der clear-Eigenschaft auf floatende Elemente</h1>
<div id="float1"></div>
<div id="float2"></div>
<p id="inhalt">Dieses Element wird unterhalb des nach rechts floatenden
Elements dargestellt, aber vom links floatenden Element verdeckt.
(<code>clear: right;</code>)
</p>
</body>
</html>
Effekt auf zusammenfallende Außenabstände
Entsteht durch ein Element Clearance, so kann der obere Außenabstand dieses Elements weder mit den Außenabständen vorheriger Nachbarelemente noch mit den Außenabständen des Elternelements zusammenfallen.
Das bedeutet, dass die Außenabstände eines Elements mit Clearance lediglich mit sich selbst oder den Außenabständen nachfolgender Elemente zusammenfallen können. Der so entstehende Außenabstand kann jedoch nicht mit dem unteren Außenabstand des Elternelements zusammenfallen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für die Auswirkung der clear-Eigenschaft auf zusammenfallende Außenabstände</title>
<style>
td { width: 15em; height: 20em; border: 3px solid orange; vertical-align: top; }
.elternelement { margin-top: 2em; }
.float { float: left; width: 5em; height: 5em; background-color: lightgreen; }
.clear { background-color: pink; margin-top: 8em; }
#clear .clear { clear: left; }
</style>
</head>
<body>
<h1>Beispiel für die Auswirkung der clear-Eigenschaft auf zusammenfallende Außenabstände</h1>
<table>
<thead>
<tr>
<th>ohne <code>clear</code></th>
<th>mit <code>clear</code></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="elternelement">
<div class="float">Float</div>
<div class="clear">Element</div>
</div>
</td>
<td id="clear">
<div class="elternelement">
<div class="float">Float</div>
<div class="clear">Clearendes Element</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Ohne die clear-Eigenschaft fallen die Außenabstände des Elternelements und des darin enthaltenen Blockelements zusammen.
clear-Eigenschaft auf das Blockelement angewendet, geschieht folgendes: Da das Blockelement sich neben dem Float befindet, muss es nach unten verschoben werden. Es entsteht Clearance. Da Clearance das Zusammenfallen von Außenabständen verhindert, wird der obere Außenabstand des Elternelements auf 2em zurückgesetzt. Sowohl das floatende als auch das clearende Element werden bei diesem Vorgang nach oben verschoben.clear-Eigenschaft nicht festgelegt worden. Erst wenn Clearance tatsächlich eingefügt werden muss, wird das Zusammenfallen von Außenabständen verhindert.
In einzelnen Fällen kann das dazu führen, dass ein Float nach dem Einfügen von Clearance höher positioniert wird, als es wäre, wenn Clearance nicht eingefügt worden wäre. Etwa dann, wenn der obere Außenabstand eines clearenden Elements mit dem oberen Außenabstand des Elternelements zusammenfällt (siehe Beispiel oben).
In diesem Fall darf das clearende Element laut CSS 2.1 zwei verschiedene Positionen einnehmen: Entweder wird das Element wie im vorherigen Abschnitt beschrieben direkt unter das floatende Element verschoben oder es wird noch weiter nach unten verschoben, bis es seine ursprüngliche Position wieder erreicht hat (im Beispiel würde das Element dann in beiden Fällen die selbe Position einehmen).
Tatsächlich wird von allen Browsern nur die erste Variante implementiert. Ein clearendes Element schiebt sich also immer direkt unter die untere Außenkante eines Floats. In CSS 3 soll die Entscheidung getroffen werden, welche Variante künftig als einzige erlaubt sein wird.Siehe auch: css-tricks: Good ol’ Margin Collapsing von Chris Coyier, 22.03.2018
Floats umschließen mit Clearance
Ein clearendes Element schiebt sich unter ein floatendes Element. Diese Eigenschaft kann genutzt werden, um Floats von deren Elternelement umschließen lassen zu können.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für einen mithilfe der clear-Eigenschaft umschlossenen Float</title>
<style>
.zusammenfassung { width: 30em; border: 3px solid orange; }
.float { float: left; width: 7em; height: 10em; margin-bottom: 1em; border: 3px solid blue; }
br { clear: both; } /* Variante 1 */
#pseudo:after { content: ""; display: block; clear: both; } /* Variante 2 */
h2 { clear: both; } /* für die 2. Unterüberschrift benötigt */
</style>
</head>
<body>
<h1>Beispiel für einen mithilfe der clear-Eigenschaft umschlossenen Float</h1>
<h2>Variante 1: Zusätzliches Element</h2>
<div class="zusammenfassung">
<div class="float"></div>
<br>
</div>
<h2>Variante 2: Pseudoelement</h2>
<div class="zusammenfassung" id="pseudo">
<div class="float"></div>
</div>
</body>
</html>
In Variante 1 wird am Ende des Elternelements ein zusätzliches Element im Dokument notiert. Die clear-Eigenschaft schiebt dieses Element unter das floatende Element. Das Elternelement wird dadurch soweit vergrößert, dass es das floatende Element zu umschließen scheint.
content und display sind erforderlich, damit eine Block-Box erzeugt wird. Die clear-Eigenschaft zeigt nur dann eine Wirkung.Wirkung von Clearance einschränken
Ein clearendes Element wirkt sich auf alle Floats aus, die sich in derselben Block-Formatierungs-Umgebung befinden, wie es selbst. Das gilt auch dann, wenn das floatende Element beispielsweise mithilfe negativer Außenabstände aus dem Inhaltsbereich eines Elements hinausgeschoben wurde .
Häufig soll aber gerade das nicht der Fall sein. Dann muss die Wirkung des clearenden Elements eingeschränkt werden. Dies kann erreicht werden, indem Float und Clear durch eine weitere Block-Formatierungs-Umgebung voneinander getrennt werden. Gelegentlich wird dann von einer „lokalen Wirkung“ des clearenden Elements gesprochen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel für die lokale Wirkung eines clearenden Elements</title>
<style>
.raster { height: 15em; border-left: 7em solid darkgray; background-color: silver; }
.float1, .float2 { float: left; width: 6em; border: .5em solid blue; }
.float1 { height: 10em; margin-left: -7em; }
.float2 { height: 7em; border-color: orange; }
.inhalt { background-color: lightgreen; }
.clear { clear: both; }
#bfc { overflow: auto; }
</style>
</head>
<body>
<h1>Beispiel für die lokale Wirkung eines clearenden Elements</h1>
<h2>Wirkung ohne Block-Formatierungsumgebung</h2>
<div class="raster">
<div class="float1">Float Eins</div>
<div class="inhalt">
<div class="float2">Float Zwei</div>
<p>Inhalte</p>
<div class="clear">Clearendes Element</div>
</div>
</div>
<h2>Wirkung mit Block-Formatierungs-Umgebung</h2>
<div class="raster">
<div class="float1"></div>
<div class="inhalt" id="bfc">
<div class="float2"></div>
<p>Inhalte</p>
<div class="clear">Clearendes Element</div>
</div>
</div>
</body>
</html>
Zunächst der Aufbau: Das Element mit der Klasse raster dient als Ausgangspunkt. In ihm befinden sich zwei Elemente: Ein Float, das in den Rahmen das Elternelements hineingeschoben wird und ein Element der Klasse inhalt für weitere Inhalte. In letzterem befinden sich ein weiterer Float und ein clearendes Element.
Normalerweise berücksichtigt das clearende Element beide Floats. Wird jedoch das Element zwischen den beiden Floats so gestaltet, dass es eine neue Block-Formatierungs-Umgebung erzeugen muss (im Beispiel geschieht das mithilfe deroverflow-Eigenschaft), so tritt die Wirkung des clearenden Elements nur innerhalb dieser Umgebung in Kraft.
clear: right;besitzt.Theoretisch würde das Absatzelement an beiden Seiten von einem Float verdeckt werden. Die
Genau zu erkennen ist dabei, dass sich die obere Rahmenkante des Absatzelements unter die untere Außenkante des Floats verschiebt.clear-Eigenschaft bewirkt jedoch, dass sich das Absatzelement unter das nach rechts floatende Element verschiebt.