CSS flydende egenskab
Definition og brug
Definerer, hvilken retning et element skal flyde i. Tidligere blev denne egenskab altid anvendt på billeder for at lade teksten omgå billedet, men i CSS kan enhver element flyde. Flydende elementer opretter en blokramme, uanset hvilket element det er.
Hvis en flydende ikke-erstatningselement skal specificeres med en tydelig bredde; ellers vil de blive så smalle som muligt.
Bemærk:Hvis der kun er meget lidt plads til flydende elementer på en række, vil elementet springe til næste række, og dette vil fortsætte, indtil en række har nok plads.
Se også:
CSS-tutorial:CSS-positionering
HTML DOM-referencehåndbogen:cssFloat-egenskaben
CSS-syntaks
float: none|left|right|initial|inherit;
Egenskabsværdi
| Værdi | Beskrivelse |
|---|---|
| left | Elementet flyder til venstre. |
| right | Elementet flyder til højre. |
| none | Standardværdi. Elementet flyder ikke og vises på den placering, hvor det optræder i teksten. |
| inherit | Definerer, at værdien af float-egenskaben skal arves fra forældreelementet. |
Tekniske detaljer
| Standardværdi: | none |
|---|---|
| Arv: | no |
| Version: | CSS1 |
| JavaScript-syntaks: | object.style.cssFloat="left" |
TIY-eksempel
- En simpel anvendelse af float-egenskaben
- Lad billedet flyde til en afsnits højre side.
- Flyt billedet med kant og margin til afsnittets højre side
- Lad billedet flyde til afsnittets højre side. Tilføj kant og margin til billedet.
- Billedet med titel flyder til højre
- Lad billedet med titel flyde til højre
- Lad afsnittets første bogstav flyde til venstre
- Lad afsnittets første bogstav flyde til venstre og tilføj stil til dette bogstav.
- Opret en horisontal menu
- Opret en horisontal menu ved hjælp af flydende elementer med en kolonne af hyperlinks.
- Opret en startside uden tabeller
- Brug af flydende elementer til at oprette en startside med sidehoved, sidefod, venstre indholdsfortegnelse og hovedindhold.
Browserunderstøttelse
Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
