CSS Layout - plovoucí a jasné
Vlastnost CSS float
určuje, jak má prvek plavat.
Vlastnost CSS clear
určuje, jaké prvky mohou plavat vedle vyčištěného prvku a na které straně.
Vlastnost plováku
Vlastnost float
se používá pro umístění a formátování obsahu, např. nechat obrázek plavat vlevo k textu v kontejneru.
Vlastnost float
může mít jednu z následujících hodnot:
-
left
- Prvek plave nalevo od svého kontejneru -
right
- Prvek plave napravo od svého kontejneru -
none
- Prvek nepluje (bude zobrazen pouze tam, kde se v textu vyskytuje). Toto je výchozí nastavení -
inherit
- Prvek zdědí hodnotu float svého rodiče
Ve svém nejjednodušším použití lze float
vlastnost použít k obtékání textu kolem obrázků.
Příklad - plovoucí: vpravo;
Následující příklad uvádí, že obrázek by se měl v textu pohybovat vpravo :
Bolest sama o sobě je láska, hlavní úložný systém. Phasellus imperdiet, ne a někdy se to říkalo, ale nedostatek nenávisti Maecenas je fanoušek, pomstychtivý a nevařící, autor masového života.
Příklad
img {
float: right;
}
Příklad - plovoucí: vlevo;
Následující příklad uvádí, že obrázek by měl v textu plavat doleva :
Bolest sama o sobě je láska, hlavní úložný systém. Phasellus imperdiet, ne a někdy se to říkalo, ale nedostatek nenávisti Maecenas je fanoušek, pomstychtivý a nevařící, autor masového života.
Příklad
img {
float: left;
}
Příklad - Bez plováku
V následujícím příkladu bude obrázek zobrazen přesně tam, kde se vyskytuje v textu (float: none;):
Bolest sama o sobě je láska, hlavní úložný systém. Phasellus imperdiet, ne a někdy se to říkalo, ale nedostatek nenávisti Maecenas je fanoušek, pomstychtivý a nevařící, autor masového života.
Příklad
img {
float: none;
}
Příklad - Plavat vedle sebe
Normálně se prvky div zobrazují nad sebou. Pokud však použijeme float: left
, můžeme prvky nechat plavat vedle sebe:
Příklad
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}