CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS Layout - plovoucí a jasné


Vlastnost CSS floaturčuje, jak má prvek plavat.

Vlastnost CSS clearurčuje, jaké prvky mohou plavat vedle vyčištěného prvku a na které straně.




Vlastnost plováku

Vlastnost floatse používá pro umístění a formátování obsahu, např. nechat obrázek plavat vlevo k textu v kontejneru.

Vlastnost floatmůž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 floatvlastnost 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 :

AnanasBolest 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. Ve smutku kleneb země. Mauris ante ligula, facilisis sed ornare eu, Lobortis in odio. Je to údolí, které občas tlačí od jezera k plánování smíchu. Teď se říká jen šípy, ale medvědi jsou velmi houževnatí a...

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 :

AnanasBolest 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. Ve smutku kleneb země. Mauris ante ligula, facilisis sed ornare eu, Lobortis in odio. Je to údolí, které občas tlačí od jezera k plánování smíchu. Teď se říká jen šípy, ale medvědi jsou velmi houževnatí a...

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;):

Ananas 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. Smutek oblouků země. Mauris ante ligula, facilisis sed ornare eu, Lobortis in odio. Je to údolí, které někdy může tlačit jezero k plánování smíchu. Teď už byly řečeno jen šípy, ale medvědi jsou velmi houževnatí a...

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;
}