CSS float- eigenschap
Voorbeeld
Laat een afbeelding naar rechts zweven:
img
{
float: right;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De float
eigenschap geeft aan of een element naar links, rechts of helemaal niet moet zweven.
Opmerking: Absoluut geplaatste elementen negeren de float
eigenschap!
Opmerking: elementen naast een zwevend element zullen eromheen vloeien. Gebruik om dit te voorkomen de clear eigenschap of de clearfix hack (zie voorbeeld onderaan deze pagina).
Standaardwaarde: | geen |
---|---|
geërfd: | Nee |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS1 |
JavaScript-syntaxis: | object .style.cssFloat="links" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS-syntaxis
float: none|left|right|initial|inherit;
Eigendomswaarden
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 |
Meer voorbeelden
Voorbeeld
Laat een afbeelding naar links zweven:
img
{
float: left;
}
Voorbeeld
Laat de afbeelding precies daar worden weergegeven waar deze in de tekst voorkomt (zwevend: geen):
img
{
float: none;
}
Voorbeeld
Laat de eerste letter van een alinea naar links zweven en stijl de letter:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Voorbeeld
Gebruik float met een lijst met hyperlinks om een horizontaal menu te maken:
.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%;}
Voorbeeld
Gebruik float om een startpagina te maken met een koptekst, voettekst, linkerinhoud en hoofdinhoud:
.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%;}
Voorbeeld
Sta geen zwevende elementen toe aan de linker- of rechterkant van een opgegeven <p>-element:
img {
float: left;
}
p.clear {
clear: both;
}
Voorbeeld
Als een drijvend element groter is dan het bevattende element, zal het buiten zijn container overlopen. Het is mogelijk om dit op te lossen met de "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS Float
HTML DOM-referentie: cssFloat-eigenschap