Was macht die folgende CSS-Regel:

.clear { clear: both; }

Und warum müssen wir es benutzen?

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

Live-Beispiel des Demo-Images.

Code für Demo

/*  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-->
<div class="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.

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.

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.

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.

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

2. Beispiel

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 .

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

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; Element unter links schwebende Elemente geschoben

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; Element unter rechts schwebende Elemente geschoben

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; Element unter alle schwebenden Elemente geschoben

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

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

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS schweben und klar

Beispiel Geige

Versuchen Sie einfach, die clear:bothEigenschaft aus dem divwith zu entfernen, class sampleund sehen Sie, wie sie dem Floating folgt divs.

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;.)

Gehen Sie dieses Tutorial durch: