Was macht die CSS-Regel „klar: beides“?

293

Was macht die folgende CSS-Regel:

.clear { clear: both; }

Und warum müssen wir es benutzen?

Peter Mortensen
quelle
22
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 ...

Geben Sie hier die Bildbeschreibung ein

Live-Beispiel des Demo-Images.

Code für Demo

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.

  1. Normales Verhalten des Blocklevel-Elements
  2. Floated Verhalten des Block Level Elements

Wie Sie bemerken, lässt der links schwebende divRaum den Raum rechts unbenutzt, wodurch sich der divnachfolgende Platz im verbleibenden Raum verschieben kann.

  1. div's werden nacheinander gerendert, wenn sie NICHT schwebend sind
  2. div verschiebt sich nebeneinander, wenn sie nach links oder rechts schweben

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.

Floated View

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.

  1. Normaler Fluss des Dokuments
  2. Abschnitte schwebten nach links
  3. Gelöschte schwebende Elemente zum Strecken der Hintergrundfarbe des Containers

( 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.

Geben Sie hier die Bildbeschreibung ein

Nach der Verwendung clear: both;wird das Containerelement auf seine Abmessungen des schwebenden Elements gedehnt.

Geben Sie hier die Bildbeschreibung ein

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.

  1. divNach links schweben, was dazu führt section, dass der verbleibende Raum betreten wird
  2. Floated divgelöscht, damit das sectionTag unter dem Floated divs gerendert wird

1. Beispiel

Geben Sie hier die Bildbeschreibung ein


2. Beispiel

Geben Sie hier die Bildbeschreibung ein

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.

Clearfix

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 .

Beachten Sie, dass dies auch in IE8 funktioniert, da IE8 :afterPseudo 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:

------------------ ----------------------------------
div1(Floated Left) 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(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------
Mr. Alien
quelle
3
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.
Madaras Geist
3
Verwandte kurze Antwort zu beziehen, bevor Sie dies lesen, nur um eine allgemeine Vorstellung zu bekommen .. stackoverflow.com/questions/16568272/…
Mr. Alien
@ 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

clear: left; Element unter links schwebende Elemente geschoben

clear: right; Element unter rechts schwebende Elemente geschoben

clear: both; Element unter alle schwebenden Elemente geschoben

clear wirkt sich nicht auf Floats außerhalb des aktuellen Blockformatierungskontexts aus

Salman A.
quelle
1
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.
Sashrika Waidyarathna
2
Sundar Pichai Doppelgänger?
Manoj Kumar
13

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.

Elch
quelle
Dieser andere Beitrag hat weitere Details zu clearfix: stackoverflow.com/questions/211383/…
Bill Hoag
2

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:

Saeed
quelle
3
Welches Tutorial?
Peter Mortensen