Die schwebenden Elemente erhöhen nicht die Höhe des Containerelements. Wenn Sie sie nicht löschen, erhöht sich die Containerhöhe nicht ...
Ich zeige dir visuell:
Weitere Erläuterungen:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
Sie können auch overflow: hidden;Containerelemente hinzufügen , aber ich würde vorschlagen, dass Sie clear: both;stattdessen verwenden.
Auch wenn Sie ein Element selbst löschen möchten, können Sie es verwenden
.self_clear:after {
content: "";
clear: both;
display: table;
}
Wie funktioniert CSS Float?
Was ist float genau und was macht es?
Das floatAnwesen wird von den meisten Anfängern missverstanden. Was genau macht floatdas? Ursprünglich wurde die floatEigenschaft eingeführt, um Text um Bilder zu fließen, die schwebend leftoder schwebend sind right. Hier ist eine weitere Erklärung von @Madara Uchicha.
Ist es also falsch, die floatEigenschaft zu verwenden, um Kisten nebeneinander zu platzieren? Die Antwort ist nein ; Es ist kein Problem, wenn Sie die floatEigenschaft verwenden, um Boxen nebeneinander zu setzen.
Wenn Sie ein Element inlineoder eine blockEbene schweben lassen, verhält sich das Element wie ein inline-blockElement.
DemoWenn Sie ein Element leftoder schweben lassen right, wird das widthElement auf den Inhalt beschränkt, den es enthält, es widthsei denn, es ist explizit definiert ...
Sie können kein floatElement center. Dies ist das größte Problem, das ich bei Anfängern immer gesehen habe. Dies ist float: center;floatImmobilie. floatwird im Allgemeinen verwendet, floatum Inhalte nach ganz links oder ganz nach rechts zu verschieben . Es gibt nur vier gültige Werte für floatEigenschaft , dh left, right, none(Standard) und inherit.
Übergeordnetes Element wird reduziert, wenn es schwebende untergeordnete Elemente enthält. Um dies zu verhindern, verwenden wir die clear: both;Eigenschaft, um die schwebenden Elemente auf beiden Seiten zu löschen, wodurch das Reduzieren des übergeordneten Elements verhindert wird. Für weitere Informationen können Sie meine andere Antwort hier verweisen .
(Wichtig) Denken Sie daran, wo wir einen Stapel verschiedener Elemente haben. Wenn wir verwenden float: left;oder sich float: right;das Element um eins über den Stapel bewegt. Daher verbergen sich die Elemente im normalen Dokumentfluss hinter den schwebenden Elementen, da sie sich auf Stapelebene über den normalen schwebenden Elementen befinden. (Bitte beziehen Sie sich nicht darauf, z-indexda dies völlig anders ist.)
Nehmen Sie einen Fall als Beispiel, um zu erklären, wie CSS-Floats funktionieren, vorausgesetzt, wir benötigen ein einfaches 2-Spalten-Layout mit Kopf-, Fuß- und 2-Spalten. Hier ist also, wie die Blaupause aussieht ...
Im obigen Beispiel schweben nur die roten Kästchen, entweder können Sie floatbeide zum leftoder Sie können floatzum leftund ein anderes rightauch, abhängig vom Layout. Wenn es 3 Spalten sind, können Sie float2 Spalten zu lefteinem anderen eine rightdavon hängt davon ab, obwohl wir in diesem Beispiel ein vereinfachtes 2-Spalten-Layout haben, so dass floateine davon leftund die andere von der right.
Markup und Stile zum Erstellen des Layouts werden weiter unten erläutert ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Lassen Sie uns Schritt für Schritt mit dem Layout fortfahren und sehen, wie float funktioniert.
Zunächst einmal verwenden wir das Haupt - Hüllenelement, können Sie einfach davon ausgehen , dass es Ihr Ansichtsfenster ist, dann verwenden wir headerund weisen eine heightvon 50pxso nichts Besonderes gibt. Es ist nur ein normales nicht schwebendes Element auf Blockebene, das 100%horizontalen Raum einnimmt, es sei denn, es schwebt oder wir weisen inline-blockes zu.
Der erste gültige Wert für floatist leftso , dass wir in unserem Beispiel float: left;für verwenden .floated_left, sodass wir beabsichtigen, einen Block in das leftElement unseres Containers zu verschieben.
Die Säule schwebte nach links
Und ja, wenn Sie sehen, dass das übergeordnete Element, das reduziert .wrapperist , das Element, das Sie mit einem grünen Rand sehen, nicht erweitert wurde, aber es sollte richtig sein? Wir werden in einer Weile darauf zurückkommen, für den Moment haben wir eine Kolumne, zu der wir schwebten left.
Wenn Sie zur zweiten Spalte kommen, lassen Sie floatdiese in dieright
Eine weitere Säule schwebte nach rechts
Hier haben wir eine 300pxbreite Säule, die wir floatzu der right, die neben der ersten Säule sitzt, wenn sie zu der schwimmt left, und da sie zu der geschwommen ist, lefthat sie eine leere Rinne zu der geschaffen right, und da auf der rightunsere reichlich Platz war rightDas schwebende Element saß perfekt neben dem lefteinen.
Trotzdem ist das übergeordnete Element reduziert. Nun, lassen Sie uns das jetzt beheben. Es gibt viele Möglichkeiten, um zu verhindern, dass das übergeordnete Element reduziert wird.
- Fügen Sie ein leeres Element auf Blockebene hinzu und verwenden Sie es,
clear: both;bevor das übergeordnete Element endet, das schwebende Elemente enthält. Jetzt ist dieses Element eine kostengünstige Lösung für clearIhre schwebenden Elemente, die die Arbeit für Sie erledigt. Ich würde jedoch empfehlen, dies nicht zu verwenden.
Fügen Sie <div style="clear: both;"></div>vor den .wrapper divEnden wie hinzu
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Demo
Nun, das behebt sich sehr gut, kein zusammengeklapptes übergeordnetes overflow: hidden;Element mehr, aber es fügt dem DOM unnötiges Markup hinzu, so dass einige vorschlagen, es für das übergeordnete Element zu verwenden, das schwebende untergeordnete Elemente enthält, die wie beabsichtigt funktionieren.
Verwenden Sie overflow: hidden;auf.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Demo
Das erspart uns jedes Mal ein Element, clear floataber da ich verschiedene Fälle damit getestet habe, ist es in einem bestimmten Fall fehlgeschlagen, der box-shadowfür die untergeordneten Elemente verwendet wird.
Demo (Kann den Schatten nicht auf allen 4 Seiten sehen,overflow: hidden;verursacht dieses Problem)
So was nun? Speichern Sie ein Element, und versuchen Sie overflow: hidden;es mit einem eindeutigen Fix-Hack. Verwenden Sie das folgende Snippet in Ihrem CSS. overflow: hidden;Rufen Sie genau wie beim übergeordneten Element das folgende Element für das übergeordnete Element auf, classum sich selbst zu löschen.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Demo
Hier funktioniert der Schatten wie beabsichtigt. Außerdem wird das übergeordnete Element selbst gelöscht, wodurch ein Zusammenbruch verhindert wird.
Und schließlich verwenden wir die Fußzeile, nachdem wir cleardie schwebenden Elemente erstellt haben.
Demo
Wann wird float: none;sowieso verwendet, da es die Standardeinstellung ist, also eine Verwendung zum Deklarieren float: none;?
Nun, es hängt davon ab, ob Sie diesen Wert häufig verwenden, wenn Sie möchten, dass Ihre schwebenden Elemente mit einer bestimmten Auflösung untereinander gerendert werden. Dafür float: none;spielt dort die Immobilie eine wichtige Rolle.
Nur wenige Beispiele aus der Praxis, wie floatnützlich dies ist.
- Das erste Beispiel, das wir bereits gesehen haben, ist das Erstellen eines oder mehrerer Spaltenlayouts.
- Verwenden Sie
imgFloated Inside p, damit unsere Inhalte herumfließen können.
Demo (ohne zu schwebenimg)
Demo 2 (imgschwebte zumleft)
- Verwenden
floatzum Erstellen eines horizontalen Menüs - Demo
Schweben Sie auch das zweite Element oder verwenden Sie "margin"
Last but not least möchte ich diesen speziellen Fall erklären, in dem Sie floatnur ein einzelnes Element zum, leftaber nicht floatdas andere, also was passiert?
Angenommen, wenn wir float: right;von unserem entfernen .floated_right class, divwird das von extrem gerendert, leftda es nicht schwebt.
Demo
Also in diesem Fall können Sie entweder floatdas leftauch
ODER
Sie können verwenden, margin-leftwas der Größe der linken schwebenden Spalte entspricht, dh 200pxbreit .