CSS/Tutorials/Ausrichtung/float und clear

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

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 der float-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 mit left.
  • inline-end: Das Element wird in Richtung der Inline-Achse verschoben. In einer von links nach rechts geschriebenen Sprache ist dies gleichbedeutend mit right.

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:

Fließtext mit Bildern ansehen …
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.

verschobene und überlagerte Blockelemente ansehen …
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.

Hinweis:
Die float-Eigenschaft ist dafür gedacht, Bilder oder andere Elemente innerhalb eines Textes umfließen zu lassen. Für mehrspaltige Layouts mit Block-Elementen ist eine Umsetzung mit Flexbox oder dem Grid Layout Stand der Technik:

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 der clear-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:
Aus Kompatibilitätsgründen kann die 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.

Treppenstufen bei gefloateten Bildern ansehen …
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:

Clearance oder Clearfix ansehen …
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.

Empfehlung: Verwende float und clear nur so sparsam wie möglich. Diese Eigenschaften waren nur dazu gedacht, einzelne Bilder im Textfluss zu positionieren.

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:

flexible Breiten für Bilder ansehen …
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.

Hauptartikel: Bilder im Internet/Einbindung mit img


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

Beispiel ansehen …
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:

Schließende und öffnende Tags in einer Zeile
<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:


Positionieren mit display:flex ansehen …
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

  1. http://www.mediaevent.de/tutorial/css-positionieren-float.html
  2. http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss#clear
  3. 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.

Beispiel ansehen …
<!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>
In diesem Beispiel befinden sich zwei in unterschiedliche Richtungen floatende Elemente, sowie ein drittes Element, das die Eigenschaft clear: right; besitzt.

Theoretisch würde das Absatzelement an beiden Seiten von einem Float verdeckt werden. Die clear-Eigenschaft bewirkt jedoch, dass sich das Absatzelement unter das nach rechts floatende Element verschiebt.

Genau zu erkennen ist dabei, dass sich die obere Rahmenkante des Absatzelements unter die untere Außenkante des Floats verschiebt.

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.

Beispiel ansehen …
<!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>
Diese Beispiele zeigen ein Element der Klasse elternelement, das einen 2em großen oberen Außenabstand besitzt. Darin befindet sich ein Float und ein weiteres Blockelement mit einem 8em großen oberen Außenabstand.

Ohne die clear-Eigenschaft fallen die Außenabstände des Elternelements und des darin enthaltenen Blockelements zusammen.

Wird die 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.
Beachten Sie: Während der Überprüfung, ob Clearance eingefügt werden muss, fallen Außenabstände zusammen, als wäre die 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:
Safari und Chrome erlauben derzeit fälschlicherweise das Zusammenfallen von Außenabständen eines clearenden Elements mit dem unteren Außenabstand dessen Elternelements. Dadurch kann die untere Rahmenkante des Elternelements an der falschen Position angezeigt werden. Auf nachfolgende Elemente hat dies jedoch keine Auswirkungen.

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.

Beispiel ansehen …
<!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>
Dieses Beispiel zeigt zwei Varianten, wie ein clearendes Element zur Umschließung eines Floats genutzt werden kann.

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.

Derselbe Effekt wird in Variante 2 mit Hilfe eines Pseudoelements erzielt, das für das Elternelement definiert wird. Die Angaben für die Eigenschaften content und display sind erforderlich, damit eine Block-Box erzeugt wird. Die clear-Eigenschaft zeigt nur dann eine Wirkung.
Hinweis:
Webautoren sollten die Verwendung eines Pseudoelements bevorzugen, da in diesem Fall das Dokument nicht verändert werden muss sowie Inhalt und Gestaltung strikt von einander getrennt sind. Müssen ältere Browser (v.a. IE < 8) Berücksichtigung finden, ist jedoch ein zusätzliches Element erforderlich.

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.

Beispiel ansehen …
<!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>
Dieses Beispiel zeigt, wie die Wirkung eines clearenden Elements auf einen bestimmten Abschnitt beschränkt werden kann.

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 der overflow-Eigenschaft), so tritt die Wirkung des clearenden Elements nur innerhalb dieser Umgebung in Kraft.