CSS dryf eiendom
Voorbeeld
Laat 'n prent na regs sweef:
img
{
float: right;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die floateienskap spesifiseer of 'n element na links, regs of glad nie moet dryf nie.
Let wel: Absoluut geposisioneerde elemente ignoreer die floateiendom!
Let wel: Elemente langs 'n drywende element sal om dit vloei. Om dit te vermy, gebruik die clear -eienskap of die clearfix-hack (sien voorbeeld onderaan hierdie bladsy).
| Standaard waarde: | geen |
|---|---|
| Geërf: | geen |
| Animateerbaar: | geen. Lees oor animeerbaar |
| Weergawe: | CSS1 |
| JavaScript-sintaksis: | voorwerp .style.cssFloat="links" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
| Property | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS-sintaksis
float: none|left|right|initial|inherit;
Eiendomswaardes
| 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 voorbeelde
Voorbeeld
Laat 'n prent na links sweef:
img
{
float: left;
}
Voorbeeld
Laat beeld vertoon word net waar dit in die teks voorkom (float: geen):
img
{
float: none;
}
Voorbeeld
Laat die eerste letter van 'n paragraaf na links sweef en styl die letter:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Voorbeeld
Gebruik float met 'n lys hiperskakels om 'n horisontale spyskaart te skep:
.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 'n tuisblad te skep met 'n kopskrif, voetskrif, linkerinhoud en hoofinhoud:
.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
Moenie drywende elemente aan die linker- of regterkant van 'n gespesifiseerde <p>-element toelaat nie:
img {
float: left;
}
p.clear {
clear: both;
}
Voorbeeld
As 'n drywende element hoër is as die element wat bevat, sal dit buite sy houer oorloop. Dit is moontlik om dit reg te stel met die "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Verwante bladsye
CSS-tutoriaal: CSS Float
HTML DOM verwysing: cssFloat eiendom