CSS float eigenschap
Aanbevolen cursus:
Definitie en gebruik
Als een float-niet-vervangend element wordt gebruikt, moet een expliciete breedte worden opgegeven; anders zullen ze zo smal mogelijk zijn.
Opmerking:Als er slechts een klein gebied beschikbaar is voor float-elementen op een regel, zal dit element naar de volgende regel springen, en dit proces zal voortduren totdat een regel voldoende ruimte heeft.
Zie ook:
CSS handleiding:CSS positie
HTML DOM referentiehandleiding:cssFloat-eigenschap
CSS syntaxis
float: none|left|right|initial|inherit;
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| left | Het element zweeft naar de linkerkant. |
| right | Het element zweeft naar de rechterkant. |
| geen | Standaardwaarde. Het element blijft niet floaten en wordt weergegeven op de plaats waar het in de tekst voorkomt. |
| inherit | Stelt dat de waarde van de float-eigenschap van het ouder-element moet worden geërfd. |
Technische details
| Standaardwaarde: | geen |
|---|---|
| Inheritantie: | nee |
| Versie: | CSS1 |
| JavaScript syntaxis: | object.style.cssFloat="left" |
TIY voorbeeld
- Eenvoudige toepassing van de float-eigenschap
- Laat een afbeelding floaten aan de rechterkant van een alinea.
- Laat een afbeelding met rand en marge floaten aan de rechterkant van een alinea
- Laat een afbeelding floaten aan de rechterkant van een alinea. Voeg een rand en een marge toe aan de afbeelding.
- Een afbeelding met een titel floaten aan de rechterkant
- Laat een afbeelding met een titel floaten aan de rechterkant
- Laat de eerste letter van een alinea floaten aan de linkerkant
- Laat de eerste letter van een alinea floaten aan de linkerkant en voeg een stijl toe aan deze letter.
- Maak een horizontale menukaart
- Maak een horizontale menukaart met float die een kolom met hyperlinks bevat.
- Maak een hoofdpagina zonder tabel
- Gebruik float om een hoofdpagina te maken met koppen, voetteksten, een linker inhoudsopgave en hoofdinhoud.
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
