CSS Floating

Floating-Rahmen können sich nach links oder rechts bewegen, bis ihre Außenseiten an die Kanten des umschließenden Rahmens oder eines anderen Floating-Rahmens stoßen.

Da der Floating-Bereich nicht im normalen Dokumentfluss ist, verhält sich der Blockbereich im normalen Dokumentfluss so, als ob der Floating-Bereich nicht existiert.

CSS Floating

Sehen Sie sich das folgende Bild an, wenn Rahmen 1 nach rechts floatet, löst er sich vom Dokumentfluss und bewegt sich nach rechts, bis die rechte Kante seine rechte Kante des umschließenden Rahmens berührt:

CSS Floating Beispiel - Elemente, die nach rechts floaten

Sehen Sie sich das folgende Bild an, wenn Rahmen 1 nach links floatet, löst er sich vom Dokumentfluss und bewegt sich nach links, bis die linke Kante seine linke Kante des umschließenden Rahmens berührt. Da er nicht mehr im Dokumentfluss ist, nimmt er keinen Raum ein und deckt tatsächlich Rahmen 2 ab, so dass Rahmen 2 aus dem Sichtfeld verschwindet.

Wenn alle drei Rahmen nach links verschoben werden, floatet Rahmen 1 nach links, bis er den umschließenden Rahmen berührt, und die anderen beiden Rahmen floaten nach links, bis sie den vorherigen Floating-Rahmen berühren.

CSS Floating Beispiel - Elemente, die nach links floaten

Wie im folgenden Bild gezeigt, wenn der umschließende Rahmen zu schmal ist, um die horizontal angeordneten drei Floating-Elemente zu fassen, dann verschieben sich die anderen Floating-Blöcke nach unten, bis ausreichend Platz vorhanden ist. Wenn die Höhe der Floating-Elemente unterschiedlich ist, können sie beim Herunterbewegen möglicherweise von anderen Floating-Elementen "gestoppt" werden:

CSS Floating Beispiel 2 - Elemente, die nach links floaten

CSS float Eigenschaft

In CSS wird die Floating-Position von Elementen durch das Attribut float erreicht.

Für mehr Informationen über das Attribut float besuchen Sie bitte das Referenzhandbuch:CSS float Eigenschaft。

Umrandungsbereich und Reinigung

Der Umrandungsbereich neben dem Schwebefenster wird verkürzt, um dem Schwebefenster Platz zu lassen und den Umrandungsbereich um den Schwebefenster herumzugehen.

Daher kann die Erstellung eines Schwebefensters die Textumgebung um ein Bild herum ermöglichen:

Zeilenrahmen um Floating-Boxen herum

Um zu verhindern, dass der Umrandungsbereich um den Schwebefenster herumgeht, muss diesem Rahmen eine Anwendung hinzugefügt werden Clear-Attribut. Der Wert des Clear-Attributs kann left, right, both oder none sein, was angibt, welche Kanten des Rahmens nicht an den Rahmen des floatenden Elements angrenzen sollten.

Um dieses Ergebnis zu erreichen, im Außenabstand des Elements, das bereinigt wird,obere Außenabstandreicht aus, um den oberen Rand des Elements senkrecht nach unten zum floatenden Rahmen zu senken:

clear Eigenschaft Beispiel - Zeilenrahmen mit clear anwenden

Dies ist ein nützliches Werkzeug, das den umgebenden Elementen ausreichend Platz für das floatende Element lässt.

Lassen Sie uns genauer hinschauen, wie Float und Clear funktionieren. Angenommen, Sie möchten ein Bild links von einem Textblock floaten und möchten, dass dieses Bild und der Text in einem anderen Element mit Hintergrundfarbe und Rahmen enthalten sind. Sie könnten den folgenden Code schreiben:

.news {
  background-color: grau;
  border: solid 1px schwarz;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>irgendwelcher Text</p>
</div>

In diesem Fall tritt ein Problem auf. Da der floatende Element den Dokumentfluss verlässt, nimmt der div, der das Bild und den Text umgibt, keinen Raum ein.

Wie lässt sich das umgebende Element visuell um den floatenden Element umgeben? Es muss an irgendeinem Ort im Element clear angewendet werden:

clear Eigenschaft Beispiel - Leere Elemente bereinigen

Leider ist ein neues Problem aufgetreten, da es keine vorhandenen Elemente gibt, die bereinigt werden können, daher müssen wir nur einen leeren Element hinzufügen und ihn bereinigen.

.news {
  background-color: grau;
  border: solid 1px schwarz;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>irgendwelcher Text</p>
<div class="clear"></div>
</div>

Das ermöglicht das gewünschte Ergebnis, erfordert jedoch zusätzlichen Code. Oft können Elemente Clear anwenden, aber manchmal muss man für die Layoutung bedeutungslose Markierungen hinzufügen.

Allerdings haben wir auch eine andere Methode, nämlich das Floaten des Container-divs:

.news {
  background-color: grau;
  border: solid 1px schwarz;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>irgendwelcher Text</p>
</div>

Das ergibt das gewünschte Ergebnis. Leider wird der nächste Element durch diesen floatenden Element beeinflusst. Um dieses Problem zu lösen, entscheiden sich einige Menschen, alle Elemente im Layout zu floaten und dann die Floats mit angemessenen, sinnvollen Elementen (oft das Fußbereich der Website) zu bereinigen. Das hilft, unnötige Markierungen zu reduzieren oder zu beseitigen.

Tatsächlich verwenden alle Seiten der CodeW3C.com-Site diese Technologie. Wenn Sie die von uns verwendeten CSS-Dateien öffnen, sehen Sie, dass wir die div für den Fußbereich bereinigt haben und die drei darüber liegenden div nach links floaten.

CSS clear Eigenschaft

Wir haben gerade detailliert die Funktionsweise der CSS-Leistung und die Anwendungsmethoden des Clear-Attributs diskutiert. Wenn Sie mehr über das Clear-Attribut erfahren möchten, besuchen Sie bitte das Referenzhandbuch:CSS clear Eigenschaft。

Floating und Bereinigung Beispiel

Einfache Anwendung der float Eigenschaft
Bewegen Sie ein Bild nach rechts in einem Absatz
Bewegen Sie ein Bild mit Rahmen und Begrenzung nach rechts in einem Absatz
Bewegen Sie ein Bild nach rechts, das in einem Absatz steht. Fügen Sie dem Bild einen Rahmen und eine Begrenzung hinzu.
Bild mit Titel nach rechts bewegen
Bewegen Sie ein Bild mit einem Titel nach rechts
Bewegen Sie den ersten Buchstaben eines Absatzes nach links
Bewegen Sie den ersten Buchstaben eines Absatzes nach links und fügen Sie diesem Buchstaben ein Style hinzu.
Erstellen Sie ein horizontales Menü
Verwenden Sie Floating mit einer horizontalen Liste von Hyperlinks, um ein horizontalen Menü zu erstellen.
Erstellen Sie eine Startseite ohne Tabelle
Verwenden Sie Floating, um eine Startseite zu erstellen, die eine Kopfzeile, einen Fußzeile, eine Seitenleiste und Hauptinhalt enthält.
Seite des Bereinigungselements bereinigen
Dieses Beispiel zeigt, wie man Floating-Elemente auf der Seite eines Bereinigungselements verwendet.