Grund
Das Problem ist, dass schwimmende Elemente nicht mehr fließen :
Ein Element wird als nicht fließend bezeichnet, wenn es schwebend, absolut positioniert oder das Wurzelelement ist.
Daher sie haben keine Auswirkungen auf Elemente als umgebende in Strömungselement würde.
Dies wird in 9.5 Floats erklärt :
Da sich kein Float im Flow befindet, fließen nicht positionierte Blockboxen, die vor und nach dem Floatbox erstellt wurden, vertikal, als ob der Float nicht vorhanden wäre. Die aktuellen und nachfolgenden Zeilenfelder, die neben dem Float erstellt werden, werden jedoch nach Bedarf gekürzt, um Platz für das Randfeld des Floats zu schaffen.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling:after {
content: 'Block sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
<div class="float"></div>
<div class="block-sibling">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>
Dies wird auch in 10.6 Berechnung von Höhen und Rändern angegeben . Für „normale“ Blöcke ,
Es werden nur Kinder im normalen Fluss berücksichtigt (dh schwimmende Boxen und absolut positionierte Boxen werden ignoriert […]).
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 130px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
Hacky Lösung: Clearance
Eine Möglichkeit, das Problem zu lösen, besteht darin, ein unterströmendes Element unter allen Schwimmern zu platzieren. Dann wächst die Höhe des übergeordneten Elements, um dieses Element (und damit auch die Floats) zu umschließen.
Dies kann mit der clearEigenschaft erreicht werden :
Diese Eigenschaft gibt an, welche Seiten der Box (en) eines Elements möglicherweise nicht
an eine frühere schwebende Box angrenzen.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent:after {
content: 'Block parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 84px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.clear {
clear: both;
text-align: center;
height: 37px;
border: 3px dashed pink;
}
.clear:after {
position: static;
content: 'Block sibling with clearance';
color: pink;
}
<div class="block-parent">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
<div class="clear"></div>
</div>
Eine Lösung besteht also darin, ein leeres Element clear: bothals letztes Geschwister der Floats hinzuzufügen
<div style="clear: both"></div>
Das ist jedoch nicht semantisch. Generieren Sie also besser ein Pseudoelement am Ende des übergeordneten Elements :
.clearfix::after {
clear: both;
display: block;
}
Es gibt mehrere Varianten dieses Ansatzes, z. B. die Verwendung der veralteten Einzelpunkt-Syntax :afterzur Unterstützung alter Browser oder die Verwendung anderer Anzeigen auf Blockebene wie display: table.
Lösung: BFC-Wurzeln
Es gibt eine Ausnahme auf das problematische Verhalten zu Beginn definiert: Wenn ein Block Element eines legt Blockforma Context (BFC ist eine Wurzel), dann wird es auch seinen schwebenden Inhalt wickeln.
Gemäß 10.6.7 'Auto'-Höhen für Blockformatierungskontextwurzeln ,
Wenn das Element schwebende Nachkommen hat, deren untere Randkante unter der unteren Inhaltskante des Elements liegt, wird die Höhe erhöht, um diese Kanten einzuschließen.
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-parent {
border: 3px solid blue;
}
.block-parent.bfc-root:after {
content: 'BFC parent';
color: blue;
}
.float {
float: left;
border: 3px solid red;
height: 127px;
width: 150px;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="block-parent bfc-root">
<div class="float"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>
Wie in 9.5 Floats erläutert , sind BFC-Wurzeln außerdem aus folgenden Gründen nützlich:
Das Rahmenfeld einer Tabelle, ein ersetztes Element auf Blockebene oder ein Element im normalen Ablauf, das einen neuen Blockformatierungskontext erstellt […], darf das Randfeld von Floats im selben Blockformatierungskontext wie das Element selbst nicht überlappen .
html {
width: 550px;
border: 1px solid;
}
body {
font-family: sans-serif;
color: rgba(0,0,0,.15);
}
body:after {
content: '';
display: block;
clear: both;
}
div {
position: relative;
}
div:after {
font-size: 200%;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.block-sibling {
border: 3px solid green;
}
.block-sibling.bfc-root:after {
content: 'BFC sibling';
color: green;
}
.float {
float: left;
border: 3px solid red;
height: 90px;
width: 150px;
z-index: 1;
}
.float:after {
content: 'Float';
color: red;
}
.bfc-root {
overflow: hidden;
}
<div class="float"></div>
<div class="block-sibling bfc-root">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>
Ein Blockformatierungskontext wird von erstellt
Blockboxen mit overflowanderen als visiblezhidden
.bfc-root {
overflow: hidden;
/* display: block; */
}
Block Container , die Boxen nicht blockieren: wenn displayeingestellt ist inline-block, table-celloder table-caption.
.bfc-root {
display: inline-block;
}
Schwimmelemente: Wenn floatgesetzt wird leftoder right.
.bfc-root {
float: left;
}
Absolut Elemente positioniert: Wenn positiongesetzt wird absoluteoder fixed.
.bfc-root {
position: absolute;
}
Hinweis die unerwünschte Nebenwirkungen haben kann, wie überfüllt Clipping Inhalt, Berechnen von Autobreiten mit dem Schrumpf-to-fit - Algorithmus, oder wird out-of-flow. Das Problem ist also, dass es nicht möglich ist, ein Element auf Blockebene mit sichtbarem Überlauf zu haben, das einen BFC erstellt.
Display L3 behebt folgende Probleme:
Geschaffen , um die flowund inneren Darstellungsarten zu einer besseren Strömungs Express Layout Anzeigetypen zur Herstellung eines Elements A und ein explizites Schalter zu schaffen BFC Wurzel. (Dies sollte die Notwendigkeit für Hacks wie und […] beseitigen. )flow-root ::after { clear: both; }overflow: hidden
Leider gibt es noch keine Browserunterstützung. Möglicherweise können wir verwenden
.bfc-root {
display: flow-root;
}