Welche Rolle spielt das Float-Attribut in CSS-Attributen?

Die Funktion des Float-Attributs in CSS besteht darin, die Bewegung von Elementen zu steuern. Auch wenn sich das Element nach links oder rechts bewegt, werden die Elemente um es herum auch neu angeordnet, was bedeutet, dass das Element kann sich nur nach links und rechts bewegen, aber nicht nach oben und unten. ;Ein schwebendes Element bewegt sich so weit wie möglich nach links oder rechts, bis seine Außenkante den Rand der umschließenden Box oder einer anderen schwebenden Box berührt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Welche Rolle spielt das Float-Attribut im CSS-Attribut?

float, ein Attribut von CSS, die Hauptattributwerte sind: left (linker Float), none (nicht float), right (rechter Float), inherit (übergeordnetes Element-Float erben), wird hauptsächlich für das Webseitenlayout verwendet .

CSS Float verschiebt das Element nach links oder rechts und die umgebenden Elemente werden ebenfalls neu angeordnet.

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

Wie Elemente schweben

Das Element schwebt horizontal, 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 darum herumgeführt:

Beispiel

img
{
    float:right;
}

Floatierte Elemente nebeneinander

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

Hier verwenden wir das Float-Attribut für die Bildergalerie:

Beispiel

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

Verwenden Sie das Attribut „clear“, um dem Text eine Bildergalerie hinzuzufügen:

Beispiel

.text_line
{
    clear:both;
}

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt das Float-Attribut in CSS-Attributen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!