CSS- Float -Eigenschaft
Beispiel
Lassen Sie ein Bild nach rechts schweben:
img
{
float: right;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die float
Eigenschaft gibt an, ob ein Element nach links, rechts oder gar nicht schweben soll.
Hinweis: Absolut positionierte Elemente ignorieren die float
Eigenschaft!
Hinweis: Elemente neben einem schwebenden Element fließen um dieses herum. Um dies zu vermeiden, verwenden Sie die clear -Eigenschaft oder den clearfix-Hack (siehe Beispiel unten auf dieser Seite).
Standardwert: | keiner |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS1 |
JavaScript-Syntax: | Objekt .style.cssFloat="links" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS-Syntax
float: none|left|right|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Lassen Sie ein Bild nach links schweben:
img
{
float: left;
}
Beispiel
Bild nur dort anzeigen lassen, wo es im Text vorkommt (float: none):
img
{
float: none;
}
Beispiel
Lassen Sie den ersten Buchstaben eines Absatzes nach links schweben und gestalten Sie den Buchstaben:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Beispiel
Verwenden Sie Float mit einer Liste von Hyperlinks, um ein horizontales Menü zu erstellen:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Beispiel
Verwenden Sie Float, um eine Homepage mit Kopfzeile, Fußzeile, linkem Inhalt und Hauptinhalt zu erstellen:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Beispiel
Floating-Elemente auf der linken oder rechten Seite eines angegebenen <p>-Elements nicht zulassen:
img {
float: left;
}
p.clear {
clear: both;
}
Beispiel
Wenn ein schwebendes Element größer als das enthaltende Element ist, wird es außerhalb seines Containers überlaufen. Es ist möglich, dies mit dem "Clearfix-Hack" zu beheben:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Verwandte Seiten
CSS-Tutorial: CSS Float
HTML-DOM-Referenz: cssFloat-Eigenschaft