CSS/Eigenschaften/Positionierung/clear
Inhaltsverzeichnis
Normalen Elementfluss nach einem Float wieder herstellen[Bearbeiten]
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.
Die clear-Eigenschaft[Bearbeiten]
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.
Hinweis
clear-Eigenschaft auch auf das br-Element in HTML angewendet werden, obwohl es sich dabei nicht um ein Blockelement handelt.Verschiebung durch Clearance[Bearbeiten]
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 (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[Bearbeiten]
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.Hinweis
Siehe auch: css-tricks: Good ol’ Margin Collapsing von Chris Coyier, 22.03.2018
Floats umschließen mit Clearance[Bearbeiten]
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.Hinweis
Wirkung von Clearance einschränken[Bearbeiten]
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.