Tiefgreifendes Verständnis der Verwendung von CSS clear:both

clear:both wird zum清除浮動Das ist der Eindruck, den ich immer hatte, aber ich verwende dies selten und mein Verständnis ist eigentlich nicht ganz richtig. Ich habe die Informationen heute überprüft und aufgezeichnet.

Aus dem Dokumentenfluss herausschweben

Der ursprüngliche Zweck von Float besteht darin, einen Textumbruch zu erreichen, der als teilweise Trennung vom Dokumentfluss verstanden werden kann.

Außerhalb des Dokumentflusses zu liegen bedeutet in CSS, dass die Box aus dem normalen Layout genommen wird und andere Boxen so platziert werden, als ob sie nicht existierten. Es gibt zwei Arten der Trennung vom Dokumentenfluss

• Vollständig außerhalb des Dokumentflusses: Beispielsweise wird bei Verwendung von position:absolute eine absolut positionierte Box von anderen Boxen, sei es ihnen selbst oder den darin enthaltenen Elementen, für das Layout ignoriert.
• Teilweise außerhalb des Dokumentflusses: das heißt, die float Box. Nach der Verwendung float Eigenschaft ignorieren andere Block-Boxen float盒子für das Layout, aber die Inline-Elemente und Inline-Block-Elemente in anderen Boxen machen immer noch Platz für diese Floating-Box.

klar: beide

clear:both wirkt auf die Box, der das Attribut hinzugefügt wird

Das Hinzufügen von clear:both zu einer Box bedeutet, dass der obere Rand dieser Box低于底外邊距aller schwebenden Boxen, die ihr之前.

Daher clear:both die Floats nicht, sondern deren Effekte. Die Floats sind immer noch teilweise außerhalb des Dokumentflusses.

Der Wert von „clear“ ist „left“ oder „right“. Meiner Meinung nach hängt es von der Schweberichtung想要低于的那個浮動盒子. Der Wert both ist niedriger als der aller davor schwebenden Boxen.

Beispiele für Clearing-Auswirkungen

Wir stellen drei Kisten auf: A, B und C

Wenn alle drei Felder nach links schweben:

Wenn C nicht auf Float eingestellt ist:

Fügen Sie clear:both/clear:left zu B hinzu:

Wie Sie sehen, wird der durch B selbst verursachte Schwebeeffekt behoben und sein oberer Rand befindet sich unterhalb任何在他之前的浮動盒子的底部. Die nicht schwebende Box C befindet sich jedoch noch immer unterhalb von AB und die Schriftart darin macht Platz für die Schwebebox.

Fügen Sie dem übergeordneten Feld ein Pseudoelement hinzu::after

Jetzt verwenden wir ein div（class:box） um die drei Boxen ABC zu umschließen, und fügen außerhalb box eine Box out , wobei ABC und out alle auf Float eingestellt sind. Jetzt sehen sie so aus:

Entfernen Sie den Float von out:

So sollte es sein.

Fügen Sie der Box ein Pseudoelement hinzu

.box::nach{
  klar: beides;
  Höhe: 10px;
  Breite: 10px;
  Hintergrund: gelb;
  Anzeige: Block;
  Inhalt: "";
} 

Jetzt wird der Float-Effekt der äußeren Box out gelöscht, aber nicht, weil clear:both den Float löscht, sondern weil der Float-Effekt des after偽元素selbst gelöscht wird und es sich jetzt unterhalb aller davor liegenden schwebenden Boxen befindet, wodurch auch die Höhe box nicht mehr zusammenbricht und „ out sich jetzt direkt unterhalb box befindet, was dem normalen Dokumentfluss entspricht.

## Beenden

Dies ist ein grundlegender Wissenspunkt zu CSS, aber ich habe ihn nie sorgfältig gelesen. Diesmal habe ich ihn geklärt. Wenn Fehler vorhanden sind, korrigieren Sie mich bitte, wenn Sie diesen Artikel sehen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.