Was ist Float in CSS?

Schweben bedeutet in CSS, ein Element nach links oder rechts zu verschieben, während die Elemente um es herum ebenfalls neu angeordnet werden. Ein schwebendes Element bewegt sich so weit wie möglich nach links oder rechts, bis seine Außenkante den Rand der enthaltenden Box oder einer anderen schwebenden Box berührt.

Die Umgebung dieses Artikels: Windows 10, CSS3, dieser Artikel gilt für alle Computermarken.

Einführung in Float:

CSS Float (Float) verschiebt das Element nach links oder rechts und die Elemente um es herum werden ebenfalls neu angeordnet.

Float wird oft für Bilder verwendet, ist aber auch beim Layout sehr nützlich.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Wie schweben Elemente?

Die horizontale Richtung des Elements schwebt, was bedeutet, dass sich das Element nur nach links und rechts, aber nicht nach oben und unten bewegen kann.

Ein schwebendes Element versucht, sich nach links oder rechts zu bewegen, bis seine Außenkante den Rand der enthaltenden Box oder einer anderen schwebenden Box berührt.

Elemente nach dem schwebenden Element umgeben es.

Elemente vor dem schwebenden Element sind nicht betroffen.

Wenn das Bild nach rechts schwebend ist, wird der folgende Textfluss nach links um das Bild gewickelt:

Beispiel:

img{
    float:right;
}

Floatierte Elemente nebeneinander

Wenn Sie mehrere schwebende Elemente zusammenfügen und Platz vorhanden ist, sie werden nebeneinander sein.

Beispiel:

Verwenden Sie das Float-Attribut für die Bildergalerie:

.thumbnail {
    float:left;    
    width:110px;    
    height:90px;    
    margin:5px;
}

Clear float – Verwenden Sie clear

Nachdem ein Element schwebend ist, werden die umgebenden Elemente neu angeordnet. Um dies zu vermeiden, verwenden Sie das Clear-Attribut. Das Attribut

clear gibt an, dass schwebende Elemente nicht auf beiden Seiten des Elements erscheinen können.

Beispiel:

Verwenden Sie das Clear-Attribut, um eine Bildergalerie zum Text hinzuzufügen:

.text_line{
    clear:both;
}

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist Float in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!