Blockformatierungskontext

Beispiele

Sehen wir uns einige Beispiele an, um die Auswirkungen eines neuen BFC zu erkennen.

Interne Floats einschließen

Im folgenden Beispiel befindet sich ein gefloatetes Element innerhalb eines <div> mit einem border. Der übrige Inhalt des <div> wird neben dem gefloateten Element angeordnet. Da das gefloatete Element höher ist als der Inhalt daneben, verläuft der Rahmen des <div> durch das Float. Wie im Leitfaden zu Elementen innerhalb und außerhalb des normalen Flusses erläutert, wurde das Float aus dem normalen Fluss genommen. Deshalb umschließen background und border des <div> nur den übrigen Inhalt, nicht aber das Float.

Mit overflow: auto

Wenn Sie overflow: auto oder einen anderen Wert als den Ausgangswert overflow: visible setzen, entsteht ein neuer BFC, der das Float einschließt. Unser <div> bildet nun ein eigenes kleines Layout innerhalb des übergeordneten Layouts. Alle seine Kindelemente bleiben darin eingeschlossen.

Das Problem bei der Verwendung von overflow zum Erzeugen eines neuen BFC ist, dass die Eigenschaft eigentlich festlegt, wie der Browser mit überlaufendem Inhalt umgehen soll. Wenn Sie diese Eigenschaft ausschließlich zum Erzeugen eines BFC verwenden, können unerwünschte Bildlaufleisten oder abgeschnittene Schatten auftreten. Außerdem ist für andere Entwickler möglicherweise nicht ersichtlich, warum Sie overflow zu diesem Zweck verwendet haben. Wenn Sie overflow verwenden, sollten Sie den Grund im Code kommentieren.

Mit display: flow-root

Mit dem Wert display: flow-root können Sie einen neuen BFC erzeugen, ohne andere potenziell problematische Nebeneffekte auszulösen. Wird display: flow-root auf den umschließenden Block angewendet, entsteht ein neuer BFC.

Mit display: flow-root; auf dem <div> nehmen alle Elemente innerhalb dieses Containers an dessen Blockformatierungskontext teil. Floats ragen dann nicht über den unteren Rand des Elements hinaus.

Der Name flow-root wird verständlich, wenn Sie das Element als eine Art root-Element betrachten (im Browser das <html>-Element): Es erzeugt einen neuen Kontext für das Flusslayout in seinem Inneren.

HTML

<section>
  <div class="box1">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
  </div>
</section>
<section>
  <div class="box2">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>overflow:auto</code> container.</p>
  </div>
</section>
<section>
  <div class="box3">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>display:flow-root</code> container.</p>
  </div>
</section>

CSS

section {
  height: 150px;
}
.box1 {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}
.box2,
.box3 {
  background-color: aliceblue;
  border: 5px solid steelblue;
}
.box2 {
  overflow: auto;
}
.box3 {
  display: flow-root;
}
.float {
  float: left;
  width: 200px;
  height: 100px;
  background-color: rgb(255 255 255 / 50%);
  border: 1px solid black;
  padding: 10px;
}

Externe Floats ausschließen

Im folgenden Beispiel erzeugen wir mit display: flow-root und Floats zwei nebeneinanderliegende Boxen. Sie zeigen, dass ein Element im normalen Fluss einen neuen BFC erzeugt und seine Außenabstandsbox keine Floats überlappt, die sich im selben Blockformatierungskontext wie das Element befinden.

HTML

<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box"><p>Normal</p></div>
</section>
<section>
  <div class="float">Try to resize this outer float</div>
  <div class="box2">
    <p><code>display:flow-root</code></p>
  </div>
</section>

CSS

section {
  height: 150px;
}
.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}
.box2 {
  background-color: aliceblue;
  border: 5px solid steelblue;
  display: flow-root;
}
.float {
  float: left;
  overflow: hidden; /* required by resize:both */
  resize: both;
  margin-right: 25px;
  width: 200px;
  height: 100px;
  background-color: rgb(255 255 255 / 75%);
  border: 1px solid black;
  padding: 10px;
}

Das Zusammenfallen von Außenabständen verhindern

Sie können einen neuen BFC erzeugen, um das Zusammenfallen von Außenabständen zwischen zwei benachbarten Elementen zu verhindern.

Beispiel für zusammenfallende Außenabstände

In diesem Beispiel gibt es zwei benachbarte <div>-Elemente mit jeweils einem vertikalen Außenabstand von 10px. Da die Außenabstände zusammenfallen, beträgt der vertikale Abstand zwischen ihnen 10px statt der möglicherweise erwarteten 20px.

<div class="blue"></div>
<div class="red"></div>

.blue,
.red {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

Zusammenfallende Außenabstände verhindern

In diesem Beispiel umschließen wir das zweite <div> mit einem äußeren <div> und erzeugen durch overflow: hidden auf dem äußeren <div> einen neuen BFC. Dadurch fallen die Außenabstände des verschachtelten <div> nicht mit denen des äußeren <div> zusammen.

<div class="blue"></div>
<div class="outer">
  <div class="red"></div>
</div>

.blue,
.red {
  height: 50px;
  margin: 10px 0;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.outer {
  overflow: hidden;
  background: transparent;
}

Spezifikationen

Siehe auch

• CSS-Syntax
• Spezifität
• Vererbung
• Box-Modell
• Layoutmodi
• Visuelle Formatierungsmodelle
• Zusammenfallen von Außenabständen
• Anfangswerte, berechnete Werte, verwendete Werte und tatsächliche Werte
• Syntax zur Definition von Werten
• Ersetzte Elemente