Vlastnost CSS float
Příklad
Nechte obrázek plavat doprava:
img
{
float: right;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Tato float
vlastnost určuje, zda má prvek plout doleva, doprava nebo vůbec.
Poznámka: Absolutně umístěné prvky tuto float
vlastnost ignorují!
Poznámka: Prvky vedle plovoucího prvku budou obtékat. Abyste tomu zabránili, použijte vlastnost clear nebo hack clearfix (viz příklad ve spodní části této stránky).
Výchozí hodnota: | žádný |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS1 |
Syntaxe JavaScriptu: | objekt .style.cssFloat="left" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Syntaxe CSS
float: none|left|right|initial|inherit;
Hodnoty vlastností
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 |
Další příklady
Příklad
Nechte obrázek plavat doleva:
img
{
float: left;
}
Příklad
Nechte obrázek zobrazit přesně tam, kde se vyskytuje v textu (float: none):
img
{
float: none;
}
Příklad
Nechte první písmeno odstavce plavat doleva a upravte písmeno:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Příklad
Použijte float se seznamem hypertextových odkazů k vytvoření horizontální nabídky:
.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%;}
Příklad
Použijte float k vytvoření domovské stránky se záhlavím, zápatím, levým obsahem a hlavním obsahem:
.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%;}
Příklad
Nepovolit plovoucí prvky na levé nebo pravé straně zadaného prvku <p>:
img {
float: left;
}
p.clear {
clear: both;
}
Příklad
Pokud je plovoucí prvek vyšší než prvek obsahující, přeteče mimo svůj kontejner. Je možné to opravit pomocí "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Související stránky
CSS tutoriál: CSS Float
HTML DOM reference: vlastnost cssFloat