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

Was macht die folgende CSS-Regel:

.clear { clear: both; } 

Und warum müssen wir es benutzen?

Solutions Collecting From Web of "Was macht die CSS-Regel “klar: beides”?"

Ich werde nicht erklären, wie die Floats hier arbeiten (im Detail), da sich diese Frage im Allgemeinen auf Warum verwenden clear: both; ODER was clear: both; genau tun …

Ich werde diese Antwort einfach und auf den Punkt halten und Ihnen graphisch erklären, warum clear: both; ist erforderlich oder was es tut …

Im Allgemeinen schweben Designer die Elemente nach links oder rechts, wodurch auf der anderen Seite ein leerer Raum entsteht, der es anderen Elementen ermöglicht, den verbleibenden Platz einzunehmen.

Warum schwimmen sie Elemente?

Elemente werden verschoben, wenn der Designer 2 Elemente auf Blockebene nebeneinander benötigt. Zum Beispiel sagen wir, dass wir eine grundlegende Webseite entcasting wollen, die ein Layout wie folgt hat …

Bildbeschreibung hier eingeben

Live Beispiel des Demobilds.

Code für die 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; } 
  
Header
Content (Floated Left, Can Be Floated To Right As Well)
Footer

Die Eigenschaft clear gibt an, dass die linke, rechte oder beide Seiten eines Elements nicht an frühere floatende Elemente im selben Blockformatierungskontext angrenzen können. Räumte Elemente werden unter die entsprechenden schwebenden Elemente geschoben. Beispiele:

clear: none; Element bleibt neben flotierten 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; } 
 
float: left;
float: right;
clear: none;

CSS float und löschen

Beispielgeige

Versuchen Sie einfach, clear:both Eigenschaft aus dem div mit class zu entfernen und zu sehen, wie es schwebenden divs folgt.

Mr. Aliens Antwort ist perfekt, aber ich empfehle sowieso nicht,

weil es nur ein Hack ist, der Ihr Markup schmutzig macht. Dies ist nutzlos leer div in Bezug auf schlechte Struktur und semantische, dies macht auch Ihren Code nicht flexibel. In einigen Browsern verursacht dieses div zusätzliche Höhe und du musst height: 0; hinzufügen height: 0; was noch schlimmer. Aber echte Probleme beginnen, wenn Sie Hintergrund oder Rahmen um Ihre floated Elemente hinzufügen möchten – es wird einfach zusammenbrechen, weil Web schlecht entworfen wurde . Ich empfehle, floated Elemente in container, die Clearfix CSS-Regel hat, zu packen . Dies ist auch Hack, aber schön, flexibler zu bedienen und lesbar für menschliche und SEO-Roboter.

Wenn Sie möchten, dass ein Element am untersten anderen Element platziert wird, verwenden Sie diesen Code in CSS. Es wird für Schwimmer verwendet.

Wenn Sie Inhalt schweben, können Sie nach links oder rechts schweben … so können Sie in einem gemeinsamen Layout ein linkes Navigations-, ein Inhalts-Div- und ein Footer-Element haben.

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 links clear: left; müssen Sie nur noch clear: left; )

Gehen Sie durch dieses Tutorial: