Wenn Sie CSS verwenden floatund das nächste Element unten möchten, nicht rechts oder links.
Riz
Keine schwebenden Elemente auf der linken und rechten Seite eines angegebenen Elements erlaubt, wenn das Element mit clear verwendet wird: beide
JackXu
Antworten:
687
Ich werde hier nicht (im Detail) erklären, wie die Floats funktionieren, da sich diese Frage im Allgemeinen darauf konzentriert, warum oder clear: both;was clear: both;genau funktioniert ...
Ich werde diese Antwort einfach und auf den Punkt halten und Ihnen grafisch erklären, warum dies clear: both;erforderlich ist oder was es tut ...
Im Allgemeinen schweben Designer die Elemente nach links oder rechts, wodurch auf der anderen Seite ein leerer Raum entsteht, in dem andere Elemente den verbleibenden Raum einnehmen können.
Warum schweben sie Elemente?
Elemente werden verschoben, wenn der Designer zwei Elemente auf Blockebene nebeneinander benötigt. Angenommen, wir möchten eine einfache Website mit einem Layout wie dem folgenden entwerfen ...
/* CSS: */*{/* Not related to floats / clear both, used it for demo purpose only */box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
header, footer {border:5px solid #000;height:100px;}
aside {float: left;width:30%;border:5px solid #000;height:300px;}
section {float: left;width:70%;border:5px solid #000;height:300px;}.clear {clear: both;}
<!-- HTML --><header>
Header
</header><aside>
Aside (Floated Left)
</aside><section>
Content (Floated Left, Can Be Floated To Right As Well)
</section><!-- Clearing Floating Elements--><divclass="clear"></div><footer>
Footer
</footer>
Hinweis: Sie können hinzufügen müssen header, footer, aside, section(und andere HTML5 - Elemente) , wie display: block;in Ihrem Stylesheet für ausdrücklich zu erwähnen , dass die Elemente auf Blockebene Elemente sind.
Erläuterung:
Ich habe ein Grundlayout, 1 Kopfzeile, 1 Seitenleiste, 1 Inhaltsbereich und 1 Fußzeile.
Keine Floats für header, als nächstes kommt das asideTag, das ich für die Seitenleiste meiner Website verwenden werde, also schwebe ich das Element nach links.
Hinweis: Standardmäßig nimmt das Element auf Blockebene eine Dokumentbreite von 100% ein. Wenn es jedoch nach links oder rechts verschoben wird, wird die Größe entsprechend dem Inhalt geändert, den es enthält.
Wie Sie bemerken, lässt der links schwebende divRaum den Raum rechts unbenutzt, wodurch sich der divnachfolgende Platz im verbleibenden Raum verschieben kann.
Ok, so verhalten sich Elemente auf Blockebene, wenn sie nach links oder rechts verschoben werden. Warum ist nun clear: both;erforderlich und warum?
Wenn Sie also in der Layout-Demo vermerken - falls Sie es vergessen haben, hier ist es ...
Ich verwende eine Klasse namens .clearund sie enthält eine Eigenschaft namens clearmit dem Wert both. Mal sehen, warum es braucht both.
Ich bin schwebend asideund sectionElemente nach links, also nehmen wir ein Szenario an, in dem wir einen Pool haben, wo headerfestes Land ist asideund sectionin dem Pool schweben und Fußzeile wieder festes Land ist, so etwas in der Art.
Das blaue Wasser hat also keine Ahnung, wie groß die Fläche der schwimmenden Elemente ist. Sie können größer als der Pool oder kleiner sein. Daher tritt hier ein häufiges Problem auf, das 90% der CSS-Anfänger beunruhigt: Warum wird der Hintergrund eines Containerelements nicht gedehnt? wenn es schwebende Elemente enthält. Dies liegt daran, dass das Containerelement hier ein POOL ist und der POOL keine Ahnung hat, wie viele Objekte schweben oder wie lang oder breit die schwebenden Elemente sind, sodass sie sich einfach nicht dehnen.
( Weitere Informationen hierzu finden Sie im Abschnitt [Clearfix] dieser Antwort. Ich verwende divabsichtlich ein leeres Beispiel zur Erklärung.)
Ich habe oben 3 Beispiele angegeben. 1. ist der normale Dokumentfluss, bei dem der redHintergrund wie erwartet gerendert wird, da der Container keine schwebenden Objekte enthält.
Wenn im zweiten Beispiel das Objekt nach links verschoben wird, kennt das Containerelement (POOL) die Abmessungen der schwebenden Elemente nicht und dehnt sich daher nicht auf die Höhe der schwebenden Elemente aus.
Nach der Verwendung clear: both;wird das Containerelement auf seine Abmessungen des schwebenden Elements gedehnt.
Ein weiterer Grund, warum dies clear: both;verwendet wird, besteht darin, zu verhindern, dass sich das Element im verbleibenden Raum nach oben verschiebt.
Angenommen, Sie möchten 2 Elemente nebeneinander und ein weiteres Element darunter ... Sie schweben also 2 Elemente nach links und möchten das andere darunter.
Last but not least wird das footerTag nach schwebenden Elementen gerendert, da ich die clearKlasse vor dem Deklarieren meiner footerTags verwendet habe, wodurch sichergestellt wird, dass alle schwebenden Elemente (links / rechts) bis zu diesem Punkt gelöscht werden.
Clearfix
Kommen wir zu Clearfix, das sich auf Floats bezieht. Wie bereits von @Elky angegeben , ist die Art und Weise, wie wir diese Floats löschen , keine saubere Methode, da wir ein leeres divElement verwenden, für das kein divElement vorgesehen ist. Daher kommt hier der Clearfix.
Stellen Sie sich das als virtuelles Element vor, das ein leeres Element für Sie erstellt, bevor Ihr übergeordnetes Element endet. Dadurch wird Ihr Wrapper-Element, das schwebende Elemente enthält, selbst gelöscht. Dieses Element ist in Ihrem DOM nicht buchstäblich vorhanden, erledigt jedoch die Aufgabe.
Um jedes Wrapper-Element mit schwebenden Elementen selbst zu löschen, können wir verwenden
.wrapper_having_floated_elements:after {/* Imaginary class name */
content:"";
clear: both;
display: table;}
Beachten Sie das :aftervon mir dafür verwendete Pseudoelement class. Dadurch wird ein virtuelles Element für das Wrapper-Element erstellt, kurz bevor es sich selbst schließt. Wenn wir in den Dom schauen, können Sie sehen, wie er im Dokumentbaum angezeigt wird.
Wenn Sie also sehen, wird es nach dem schwebenden Kind gerendert, divwo wir die Gleitkommazahlen löschen. Dies ist nichts anderes als gleichbedeutend mit einem leeren divElement mit einer clear: both;Eigenschaft, die wir auch dafür verwenden. Warum display: table;und contentaußerhalb dieses Antwortbereichs, aber Sie können hier mehr über Pseudoelemente erfahren .
Die meisten Entwickler schweben ihren Inhalt nach links oder rechts auf ihre Seiten, wahrscheinlich Divs mit Logo, Seitenleiste, Inhalt usw. Diese Divs schweben nach links oder rechts, sodass der Rest des Speicherplatzes nicht verwendet wird. Wenn Sie also andere Container platzieren, wird dies der Fall sein Float auch im verbleibenden Raum, um zu verhindern, dass dies clear: both;verwendet wird, werden alle Elemente gelöscht, die nach links oder rechts schweben.
Demonstration:
----------------------------------------------------
div1(FloatedLeft)Other div takes up the space here----------------------------------------------------
Was ist nun, wenn Sie das andere Div-Rendering unten erstellen möchten div1, damit Sie clear: both;sicherstellen können, dass alle Floats links oder rechts gelöscht werden?
------------------
div1(FloatedLeft)------------------<div style="clear: both;"><!--This<div> acts as a separator--></div>----------------------------------Other div renders here now----------------------------------
Wenn Sie noch nie von Floats gehört haben, empfehlen wir Ihnen, zuerst eine Einführung in Floats zu lesen - siehe beispielsweise den Link in der nächsten Antwort. Dann komm zurück und lies diese Antwort - es wird Sinn machen.
osa
37
Beachten Sie, dass Floats ursprünglich nicht so erfunden wurden, dass zwei Elemente auf Blockebene nebeneinander liegen. Das ist lediglich der Nebeneffekt! Der ursprüngliche Zweck bestand darin, den Text inline um Bilder herum fließen zu lassen, sodass Sie die Bilder in beide Richtungen schweben ließen.
@ mr-alien Gutes Beispiel, aber im Fall von jsfiddle.net/N82UD/1, wenn Sie den Bildschirm verkleinern, gibt es ein Problem mit float und das "gelöschte" Element folgt nicht dem Fluss: jsfiddle.net/N82UD/138 It nimmt den Raum von schwimmendem Gegenstand 2
Omar
1
@Carlo: Eine Alternative, die häufig in Vorlagen wie Twitter Bootstrap verwendet wird. ist, display: inline-blockein Element anzulegen und das übergeordnete Element, das Sie verwenden können text-align: left, text-align: centeroder text-align: rightzum Beispiel.
Daan
39
Die clearEigenschaft gibt an, dass die linke, rechte oder beide Seiten eines Elements nicht an frühere schwebende Elemente innerhalb desselben Blockformatierungskontexts angrenzen dürfen. Gelöschte Elemente werden unter die entsprechenden schwebenden Elemente geschoben. Beispiele:
clear: none; Element bleibt neben schwebenden Elementen
Ausgezeichnet. Dies ist die beste Antwort. Ich frage mich, warum eine andere Antwort akzeptiert wurde.
Sawa
Was passiert, wenn wir die display: inline-block;CSS-Eigenschaft aus diesem Szenario entfernen ? Das inline-blockübergeordnete Element wird auf sein Geschwisterelement mit Klasse ausgedehnt float-left. Die Aussage "klar, wirkt sich nicht auf Floats außerhalb des aktuellen Blockformatierungskontexts aus" ist falsch. Könnte jemand bitte erklären?
Sashrika Waidyarathna
@SashrikaWaidyarathna: Ein übergeordnetes Element generiert nicht unbedingt einen Blockformatierungskontext für seine untergeordneten Elemente . In Ihrem Beispiel bedeutet (a) Entfernen display: inline-block, dass kein Blockformatierungskontext mehr generiert wird. (B) Die Floats / Clearings in diesem Element und der erste Float werden alle Teil desselben Blockformatierungskontexts (des Ansichtsfensters).
Salman A
@ SalmanA, danke für die Erklärung unter Bezugnahme auf die CSS-Spezifikation. Die Definition des Blockformatierungskontexts war mir nicht bekannt.
Die Antwort von Mr. Alien ist perfekt, aber ich empfehle <div class="clear"></div>sie trotzdem nicht zu verwenden, da es nur ein Hack ist, der Ihr Markup schmutzig macht. Dies ist nutzlos leer divin Bezug auf schlechte Struktur und Semantik, dies macht Ihren Code auch nicht flexibel. In einigen Browsern verursacht dieses Div zusätzliche Höhe und Sie müssen hinzufügen, height: 0;was noch schlimmer ist. Echte Probleme treten jedoch auf, wenn Sie Hintergrund oder Rahmen um Ihre schwebenden Elemente hinzufügen möchten - sie werden nur zusammenbrechen, weil das Web schlecht gestaltet wurde . Ich empfehle, schwebende Elemente in einen Container mit einer Clearfix- CSS-Regel zu verpacken . Dies ist auch Hack, aber schön, flexibler zu bedienen und für menschliche und SEO-Roboter lesbar.
Wenn Sie möchten, dass ein Element am unteren Ende des anderen Elements platziert wird, verwenden Sie diesen Code in CSS. Es wird für Schwimmer verwendet.
Wenn Sie Inhalte schweben lassen, können Sie nach links oder rechts schweben. In einem allgemeinen Layout haben Sie möglicherweise ein linkes Navigationssystem, ein Inhaltsdiv. Und eine Fußzeile.
Um sicherzustellen, dass die Fußzeile unter diesen beiden Schwimmern bleibt (wenn Sie nach links und rechts geschwommen sind), setzen Sie die Fußzeile als clear: both.
Auf diese Weise bleibt es unter beiden Schwimmern.
(Wenn Sie nur noch links räumen, müssen Sie nur noch wirklich clear: left;.)
float
und das nächste Element unten möchten, nicht rechts oder links.Antworten:
Ich werde hier nicht (im Detail) erklären, wie die Floats funktionieren, da sich diese Frage im Allgemeinen darauf konzentriert, warum oder
clear: both;
wasclear: both;
genau funktioniert ...Ich werde diese Antwort einfach und auf den Punkt halten und Ihnen grafisch erklären, warum dies
clear: both;
erforderlich ist oder was es tut ...Im Allgemeinen schweben Designer die Elemente nach links oder rechts, wodurch auf der anderen Seite ein leerer Raum entsteht, in dem andere Elemente den verbleibenden Raum einnehmen können.
Warum schweben sie Elemente?
Elemente werden verschoben, wenn der Designer zwei Elemente auf Blockebene nebeneinander benötigt. Angenommen, wir möchten eine einfache Website mit einem Layout wie dem folgenden entwerfen ...
Live-Beispiel des Demo-Images.
Code für Demo
Code-Snippet anzeigen
Hinweis: Sie können hinzufügen müssen
header
,footer
,aside
,section
(und andere HTML5 - Elemente) , wiedisplay: block;
in Ihrem Stylesheet für ausdrücklich zu erwähnen , dass die Elemente auf Blockebene Elemente sind.Erläuterung:
Ich habe ein Grundlayout, 1 Kopfzeile, 1 Seitenleiste, 1 Inhaltsbereich und 1 Fußzeile.
Keine Floats für
header
, als nächstes kommt dasaside
Tag, das ich für die Seitenleiste meiner Website verwenden werde, also schwebe ich das Element nach links.Wie Sie bemerken, lässt der links schwebende
div
Raum den Raum rechts unbenutzt, wodurch sich derdiv
nachfolgende Platz im verbleibenden Raum verschieben kann.div
's werden nacheinander gerendert, wenn sie NICHT schwebend sinddiv
verschiebt sich nebeneinander, wenn sie nach links oder rechts schwebenOk, so verhalten sich Elemente auf Blockebene, wenn sie nach links oder rechts verschoben werden. Warum ist nun
clear: both;
erforderlich und warum?Wenn Sie also in der Layout-Demo vermerken - falls Sie es vergessen haben, hier ist es ...
Ich verwende eine Klasse namens
.clear
und sie enthält eine Eigenschaft namensclear
mit dem Wertboth
. Mal sehen, warum es brauchtboth
.Ich bin schwebend
aside
undsection
Elemente nach links, also nehmen wir ein Szenario an, in dem wir einen Pool haben, woheader
festes Land istaside
undsection
in dem Pool schweben und Fußzeile wieder festes Land ist, so etwas in der Art.Das blaue Wasser hat also keine Ahnung, wie groß die Fläche der schwimmenden Elemente ist. Sie können größer als der Pool oder kleiner sein. Daher tritt hier ein häufiges Problem auf, das 90% der CSS-Anfänger beunruhigt: Warum wird der Hintergrund eines Containerelements nicht gedehnt? wenn es schwebende Elemente enthält. Dies liegt daran, dass das Containerelement hier ein POOL ist und der POOL keine Ahnung hat, wie viele Objekte schweben oder wie lang oder breit die schwebenden Elemente sind, sodass sie sich einfach nicht dehnen.
( Weitere Informationen hierzu finden Sie im Abschnitt [Clearfix] dieser Antwort. Ich verwende
div
absichtlich ein leeres Beispiel zur Erklärung.)Ich habe oben 3 Beispiele angegeben. 1. ist der normale Dokumentfluss, bei dem der
red
Hintergrund wie erwartet gerendert wird, da der Container keine schwebenden Objekte enthält.Wenn im zweiten Beispiel das Objekt nach links verschoben wird, kennt das Containerelement (POOL) die Abmessungen der schwebenden Elemente nicht und dehnt sich daher nicht auf die Höhe der schwebenden Elemente aus.
Nach der Verwendung
clear: both;
wird das Containerelement auf seine Abmessungen des schwebenden Elements gedehnt.Ein weiterer Grund, warum dies
clear: both;
verwendet wird, besteht darin, zu verhindern, dass sich das Element im verbleibenden Raum nach oben verschiebt.Angenommen, Sie möchten 2 Elemente nebeneinander und ein weiteres Element darunter ... Sie schweben also 2 Elemente nach links und möchten das andere darunter.
div
Nach links schweben, was dazu führtsection
, dass der verbleibende Raum betreten wirddiv
gelöscht, damit dassection
Tag unter dem Floateddiv
s gerendert wird1. Beispiel
2. Beispiel
Last but not least wird das
footer
Tag nach schwebenden Elementen gerendert, da ich dieclear
Klasse vor dem Deklarieren meinerfooter
Tags verwendet habe, wodurch sichergestellt wird, dass alle schwebenden Elemente (links / rechts) bis zu diesem Punkt gelöscht werden.Clearfix
Kommen wir zu Clearfix, das sich auf Floats bezieht. Wie bereits von @Elky angegeben , ist die Art und Weise, wie wir diese Floats löschen , keine saubere Methode, da wir ein leeres
div
Element verwenden, für das keindiv
Element vorgesehen ist. Daher kommt hier der Clearfix.Stellen Sie sich das als virtuelles Element vor, das ein leeres Element für Sie erstellt, bevor Ihr übergeordnetes Element endet. Dadurch wird Ihr Wrapper-Element, das schwebende Elemente enthält, selbst gelöscht. Dieses Element ist in Ihrem DOM nicht buchstäblich vorhanden, erledigt jedoch die Aufgabe.
Um jedes Wrapper-Element mit schwebenden Elementen selbst zu löschen, können wir verwenden
Beachten Sie das
:after
von mir dafür verwendete Pseudoelementclass
. Dadurch wird ein virtuelles Element für das Wrapper-Element erstellt, kurz bevor es sich selbst schließt. Wenn wir in den Dom schauen, können Sie sehen, wie er im Dokumentbaum angezeigt wird.Wenn Sie also sehen, wird es nach dem schwebenden Kind gerendert,
div
wo wir die Gleitkommazahlen löschen. Dies ist nichts anderes als gleichbedeutend mit einem leerendiv
Element mit einerclear: both;
Eigenschaft, die wir auch dafür verwenden. Warumdisplay: table;
undcontent
außerhalb dieses Antwortbereichs, aber Sie können hier mehr über Pseudoelemente erfahren .Beachten Sie, dass dies auch in IE8 funktioniert, da IE8
:after
Pseudo unterstützt .Ursprüngliche Antwort:
Die meisten Entwickler schweben ihren Inhalt nach links oder rechts auf ihre Seiten, wahrscheinlich Divs mit Logo, Seitenleiste, Inhalt usw. Diese Divs schweben nach links oder rechts, sodass der Rest des Speicherplatzes nicht verwendet wird. Wenn Sie also andere Container platzieren, wird dies der Fall sein Float auch im verbleibenden Raum, um zu verhindern, dass dies
clear: both;
verwendet wird, werden alle Elemente gelöscht, die nach links oder rechts schweben.Demonstration:
Was ist nun, wenn Sie das andere Div-Rendering unten erstellen möchten
div1
, damit Sieclear: both;
sicherstellen können, dass alle Floats links oder rechts gelöscht werden?quelle
display: inline-block
ein Element anzulegen und das übergeordnete Element, das Sie verwenden könnentext-align: left
,text-align: center
odertext-align: right
zum Beispiel.Die
clear
Eigenschaft gibt an, dass die linke, rechte oder beide Seiten eines Elements nicht an frühere schwebende Elemente innerhalb desselben Blockformatierungskontexts angrenzen dürfen. Gelöschte Elemente werden unter die entsprechenden schwebenden Elemente geschoben. Beispiele:clear: none;
Element bleibt neben schwebenden ElementenCode-Snippet anzeigen
clear: left;
Element unter links schwebende Elemente geschobenCode-Snippet anzeigen
clear: right;
Element unter rechts schwebende Elemente geschobenCode-Snippet anzeigen
clear: both;
Element unter alle schwebenden Elemente geschobenCode-Snippet anzeigen
clear
wirkt sich nicht auf Floats außerhalb des aktuellen Blockformatierungskontexts ausCode-Snippet anzeigen
quelle
display: inline-block;
CSS-Eigenschaft aus diesem Szenario entfernen ? Dasinline-block
übergeordnete Element wird auf sein Geschwisterelement mit Klasse ausgedehntfloat-left
. Die Aussage "klar, wirkt sich nicht auf Floats außerhalb des aktuellen Blockformatierungskontexts aus" ist falsch. Könnte jemand bitte erklären?display: inline-block
, dass kein Blockformatierungskontext mehr generiert wird. (B) Die Floats / Clearings in diesem Element und der erste Float werden alle Teil desselben Blockformatierungskontexts (des Ansichtsfensters).CSS schweben und klar
Beispiel Geige
Versuchen Sie einfach, die
clear:both
Eigenschaft aus demdiv
with zu entfernen,class
sample
und sehen Sie, wie sie dem Floating folgtdivs
.quelle
Die Antwort von Mr. Alien ist perfekt, aber ich empfehle
<div class="clear"></div>
sie trotzdem nicht zu verwenden, da es nur ein Hack ist, der Ihr Markup schmutzig macht. Dies ist nutzlos leerdiv
in Bezug auf schlechte Struktur und Semantik, dies macht Ihren Code auch nicht flexibel. In einigen Browsern verursacht dieses Div zusätzliche Höhe und Sie müssen hinzufügen,height: 0;
was noch schlimmer ist. Echte Probleme treten jedoch auf, wenn Sie Hintergrund oder Rahmen um Ihre schwebenden Elemente hinzufügen möchten - sie werden nur zusammenbrechen, weil das Web schlecht gestaltet wurde . Ich empfehle, schwebende Elemente in einen Container mit einer Clearfix- CSS-Regel zu verpacken . Dies ist auch Hack, aber schön, flexibler zu bedienen und für menschliche und SEO-Roboter lesbar.quelle
clearfix
: stackoverflow.com/questions/211383/…Wenn Sie möchten, dass ein Element am unteren Ende des anderen Elements platziert wird, verwenden Sie diesen Code in CSS. Es wird für Schwimmer verwendet.
Wenn Sie Inhalte schweben lassen, können Sie nach links oder rechts schweben. In einem allgemeinen Layout haben Sie möglicherweise ein linkes Navigationssystem, ein Inhaltsdiv. Und eine Fußzeile.
Um sicherzustellen, dass die Fußzeile unter diesen beiden Schwimmern bleibt (wenn Sie nach links und rechts geschwommen sind), setzen Sie die Fußzeile als
clear: both
.Auf diese Weise bleibt es unter beiden Schwimmern.
(Wenn Sie nur noch links räumen, müssen Sie nur noch wirklich
clear: left;
.)Gehen Sie dieses Tutorial durch:
quelle