Block-Formatierungs-Kontext
Ein Block-Formatierungs-Kontext (BFC) ist ein Teil der visuellen CSS-Darstellung einer Webseite. Es ist der Bereich, in dem das Layout von Blockboxen erfolgt und in dem Floats mit anderen Elementen interagieren.
Ein Block-Formatierungs-Kontext wird durch mindestens eines der folgenden Elemente geschaffen:
- Das Wurzelelement des Dokuments (
<html>
). - Floats (Elemente, bei denen
float
nichtnone
ist). - Absolut positionierte Elemente (Elemente, bei denen
position
absolute
oderfixed
ist). - Inline-Blöcke (Elemente mit
display: inline-block
). - Tabellenspalten (Elemente mit
display: table-cell
, was der Standard für HTML-Tabellenspalten ist). - Tabellenüberschriften (Elemente mit
display: table-caption
, was der Standard für HTML-Tabellenüberschriften ist). - Anonyme Tabellenspalten, die implizit durch die Elemente mit
display: table
,table-row
,table-row-group
,table-header-group
,table-footer-group
(die Standardeinstellung für HTML-Tabellen, Tabellenzeilen, Tabellengruppen, Tabellenköpfe und Tabellenfüße) oderinline-table
erstellt werden. - Blockelemente, bei denen
overflow
einen anderen Wert alsvisible
undclip
hat. - Elemente mit
display: flow-root
. <button>
-Elemente undbutton
<input>
-Typen, die standardmäßigdisplay: flow-root
haben.- Elemente mit
contain: layout
,content
oderpaint
. - Flex-Items (direkte Kinder eines Elements mit
display: flex
oderinline-flex
), sofern sie selbst weder flex noch grid noch table Container sind. - Grid-Items (direkte Kinder eines Elements mit
display: grid
oderinline-grid
), sofern sie selbst weder flex noch grid noch table Container sind. - Multicol-Container (Elemente, bei denen
column-count
odercolumn-width
nichtauto
ist, einschließlich Elemente mitcolumn-count: 1
). column-span: all
, selbst wenn dascolumn-span: all
Element nicht von einem Multicol-Container umschlossen ist.
Formatierungskontexte beeinflussen das Layout, weil ein Element, das einen neuen Block-Formatierungs-Kontext schafft:
- interne Floats enthält.
- externe Floats ausschließt.
- Randüberlagerung unterdrückt.
Flex- und Grid-Container, definiert durch das Setzen eines Elements auf (display
flex
, grid
, inline-flex
oder inline-grid
, schaffen einen neuen Flex- oder Grid-Formatierungs-Kontext. Diese sind ähnlich dem Block-Formatierungs-Kontext, außer dass darin keine schwebenden Kinder verfügbar sind, aber diese Formatierungskontexte schließen externe Floats aus und unterdrücken Randüberlagerungen.
Beispiele
Schauen wir uns ein paar dieser Beispiele an, um den Effekt der Erstellung eines neuen BFC zu sehen.
Interne Floats enthalten
Im folgenden Beispiel haben wir ein schwebendes Element, das die gleiche Höhe wie der daneben befindliche Inhalt hat. Wir haben ein schwebendes Element in einem <div>
mit einem border
angewendet. Der Inhalt dieses <div>
hat sich neben dem schwebenden Element platziert. Da der Inhalt des schwebenden Elements höher ist als der daneben befindliche Inhalt, läuft der Rand des <div>
nun durch das schwebende Element. Wie im Leitfaden für in Fluss und außerhalb des Flusses befindliche Elemente erklärt, wurde das schwebende Element aus dem Fluss entfernt, sodass der background
und der border
des <div>
nur den Inhalt und nicht das schwebende Element enthalten.
Verwendung von overflow: auto
Das Festlegen von overflow: auto
oder anderen Werten als der Anfangswert von overflow: visible
erstellt einen neuen BFC, der das schwebende Element enthält. Unser <div>
wird nun zu einem Mini-Layout innerhalb unseres Layouts. Jedes Kind-Element wird darin enthalten sein.
Das Problem bei der Verwendung von overflow
, um einen neuen BFC zu erstellen, ist, dass die overflow
-Eigenschaft dazu gedacht ist, dem Browser mitzuteilen, wie Sie mit überfließendem Inhalt umgehen möchten. Es gibt einige Gelegenheiten, bei denen Sie festzustellen werden, dass Sie unerwünschte Scrollbalken oder abgeschnittene Schatten erhalten, wenn Sie diese Eigenschaft rein zur Erstellung eines BFC verwenden. Außerdem ist es möglicherweise für einen zukünftigen Entwickler nicht lesbar, da es möglicherweise nicht offensichtlich ist, warum Sie overflow
für diesen Zweck verwendet haben. Wenn Sie overflow
verwenden, ist es eine gute Idee, den Code zu kommentieren, um eine Erklärung zu geben.
Verwendung von display: flow-root
Der Wert display: flow-root
ermöglicht es uns, einen neuen BFC ohne andere potenziell problematische Nebeneffekte zu erstellen. Die Verwendung von display: flow-root
auf dem enthaltenen Block erstellt einen neuen BFC.
Mit display: flow-root;
auf dem <div>
nimmt alles innerhalb dieses Containers am Block-Formatierungs-Kontext des Containers teil, und Floats ragen nicht aus dem unteren Ende des Elements hervor.
Der Wertname flow-root
ergibt Sinn, wenn Sie verstehen, dass Sie etwas schaffen, das wie das Wurzel
-Element (<html>
-Element im Browser) funktioniert, in Bezug darauf, wie es einen neuen Kontext für das Flusslayout in sich erstellt.
Dies ist das Standard-Rendering für <button>
-Elemente und button
<input>
-Typen, was bedeutet, dass Schaltflächen einen neuen BFC erstellen, solange ihr display
-Wert nicht auf einen Wert gesetzt ist, der nicht automatisch einen neuen BFC erstellt.
HTML
<section>
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
</section>
<section>
<div class="box" style="overflow:auto">
<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="box" style="display:flow-root">
<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;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
}
.box[style] {
background-color: aliceblue;
border: 5px solid steelblue;
}
.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 verwenden wir display:flow-root
und Floats, um zwei nebeneinander liegende Kästen zu erstellen, die demonstrieren, dass ein Element im normalen Fluss einen neuen BFC erzeugt und nicht das Randfeld der Floats in demselben Block-Formatierungs-Kontext wie das Element selbst überlappt.
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="box" style="display:flow-root">
<p><code>display:flow-root</code></p>
</div>
</section>
CSS
section {
height: 150px;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
}
.box[style] {
background-color: aliceblue;
border: 5px solid steelblue;
}
.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;
}
Randüberlagerung verhindern
Sie können einen neuen BFC erstellen, um Randüberlagerung zwischen zwei benachbarten Elementen zu vermeiden.
Beispiel zur Randüberlagerung
In diesem Beispiel haben wir zwei benachbarte <div>
-Elemente, die jeweils einen vertikalen Rand von 10px
haben. Aufgrund der Randüberlagerung beträgt der vertikale Abstand zwischen ihnen 10px
, nicht die 20px
, die wir erwarten könnten.
<div class="blue"></div>
<div class="red"></div>
.blue,
.red {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red {
background: red;
}
Verhindern der Randüberlagerung
In diesem Beispiel umhüllen wir das zweite <div>
mit einem äußeren <div>
und erstellen einen neuen BFC, indem wir overflow: hidden
auf dem äußeren <div>
verwenden. Dieser neue BFC verhindert, dass die Ränder des verschachtelten <div>
mit denen des äußeren <div>
überlagern.
<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
Specification |
---|
CSS Display Module Level 3 # block-formatting-context |