CSS -Layout - schwebend und klar
Die CSS float-Eigenschaft gibt an, wie ein Element schweben soll.
Die CSS clear-Eigenschaft gibt an, welche Elemente neben dem gelöschten Element schweben können und auf welcher Seite.
Die Float-Eigenschaft
Die floatEigenschaft wird zum Positionieren und Formatieren von Inhalten verwendet, z. B. lassen Sie ein Bild in einem Container links neben dem Text schweben.
Die floatEigenschaft kann einen der folgenden Werte haben:
-
left- Das Element schwebt links neben seinem Container -
right- Das Element schwebt rechts neben seinem Container -
none- Das Element schwebt nicht (wird genau dort angezeigt, wo es im Text vorkommt). Dies ist Standard -
inherit- Das Element erbt den Gleitkommawert seines Elternelements
In seiner einfachsten Verwendung kann die floatEigenschaft verwendet werden, um Text um Bilder zu fließen.
Beispiel - Float: rechts;
Das folgende Beispiel gibt an, dass ein Bild in einem Text nach rechts schweben soll :
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Phasellus imperdiet, nein, hieß es manchmal, aber der Mangel an Hass Maecenas ist Fans, rachsüchtig und nicht kochend, der Urheber des Massenlebens.
Beispiel
img {
float: right;
}
Beispiel - Schwimmer: links;
Das folgende Beispiel gibt an, dass ein Bild in einem Text nach links schweben soll:
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Phasellus imperdiet, nein, hieß es manchmal, aber der Mangel an Hass Maecenas ist Fans, rachsüchtig und nicht kochend, der Urheber des Massenlebens.
Beispiel
img {
float: left;
}
Beispiel - Kein Schwimmer
Im folgenden Beispiel wird das Bild genau dort angezeigt, wo es im Text vorkommt (float: none;):
Der Schmerz selbst ist Liebe, das Hauptspeichersystem. Phasellus imperdiet, nein, hieß es manchmal, aber der Mangel an Hass Maecenas ist Fans, rachsüchtig und nicht kochend, der Urheber des Massenlebens.
Beispiel
img {
float: none;
}
Beispiel - Nebeneinander schweben
Normalerweise werden div-Elemente übereinander angezeigt. Wenn wir jedoch verwenden float: left, können wir Elemente nebeneinander schweben lassen:
Beispiel
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}