dodání ihned! nové
Hledáme programátora do rostoucího týmu ITnetwork.cz, 100% home office, 100% flexibilní pracovní doba. Více informací
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF

Lekce 24 - Plovoucí obsah v CSS 3

V předchozí lekci, Vykreslování, překrývání a svislé zarovnání prvků v CSS3, jsme se zaměřovali na vlastnosti upravující způsob vykreslování, překrývání a svislé zarovnání elementů.

V této lekci se podíváme na vlastnost float, kterou se nastavuje tzv. plovoucí obsah, tedy obsah, kolem kterého obtéká jiný obsah (například text kolem obrázku). Následně se zaměříme na vlastnost clear, kterou se pak vytyčí konec obtékání, resp. oblast, ve které obtékání už nemá nastávat.

Float

Pomocí CSS 3 vlastnosti float nastavujeme, zda má být element plovoucí. Tyto elementy jsou vyjmuty z klasického rozložení stránky a jsou neplovoucím obsahem obtékány. Jednoduchým příkladem je obrázek, který může být vložen klasicky do řádku nebo může být textem obtékán a zasahovat tedy do více řádků. Pomocí této vlastnosti lze poskládat několik blokových elementů vedle sebe, využívá se tedy při tvorbě layoutu webu.

Hodnoty

  • left - Element plave (je obtékán) po levé straně a je neplovoucím obsahem obtékán zprava.
  • right - Element plave po pravé straně a je neplovoucím obsahem obtékán zleva.
  • none - Element není plovoucí. Pokud je tedy vložen v textu, zobrazí se přesně na místě, kde je vložen.
  • inherit - Vlastnost float bude zděděna od rodičovského elementu.

Ukázka

Nastavme si k obrázku ptáků a textu Lorem ipsum obtékání zleva (left):

<img src="sova.png" alt="Sova" class="vlevo" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

CSS třídy .vlevo je jasný:

.vlevo
{
   float: left;
}

Výsledek:

Plovoucí obrázek
index.html

Bez plavání (nastavení obtékání) by obrázek vypadal takto (nastavíme float na none, ale samozřejmě by stačilo vlastnost jen vynechat):

Neplovoucí obrázek
index.html

Clear

Pomocí CSS3 vlastnosti clear nastavujeme, v které části elementu není povolen plovoucí obsah. Mluvíme o tom, že plovoucí obsah zastavíme.

Hodnoty

  • left - Na levé straně elementu není povolen plovoucí obsah.
  • right - Na pravé straně elementu není povolen plovoucí obsah.
  • both - Na obou stranách elementu není povolen plovoucí obsah.
  • none (výchozí) - Plovoucí obsah je povolen na obou stranách elementu, tedy zleva i zprava.
  • inherit - Vlastnost clear bude zděděna od rodičovského elementu.

Ukázka

Umístěme plovoucí obrázek na levou část a nechme ho obtékat textem. Poté si ale rozmyslíme, že další odstavec již nechceme mít obtékaný. Proto zde nastavíme clear na both, čímž se obtékání zastaví a již dále nepokračuje. K zastavení obtékání se často používá značka <br> nebo rovnou div:

<img src="sova.png" alt="Sova" class="vlevo" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br class="clear" />
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Třída .vlevo samozřejmě stále platí, přidáme další třídu .clear:

.vlevo
{
   float: left;
}
.clear {
   clear: both;
}

Výsledek:

Clear
index.html

Bez vlastnosti clear by to tedy vypadalo takto:

Clear
index.html

V následující lekci, Přetékání obsahu v CSS 3, se podíváme na vlastnosti upravující prvky v případě přetékajícího obsahu.


 

Předchozí článek
Vykreslování, překrývání a svislé zarovnání prvků v CSS3
Všechny články v sekci
CSS3 od A do Z
Přeskočit článek
(nedoporučujeme)
Přetékání obsahu v CSS 3
Článek pro vás napsal Jakub Raida
Avatar
Uživatelské hodnocení:
2 hlasů
Autor má rád literaturu, dějiny, filmy, počítačové hry, paleontologii, vesmír a programování.
Aktivity

 

 

Komentáře

Avatar
Michael Stanovský:10. října 3:06

Vždycky se tady něco nového dozvím.

Odpovědět
10. října 3:06
Programátor dělá co umí, počítač si dělá co chce.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Michael Stanovský:10. října 3:07

Vždycky se tady něco nového dozvím.

Odpovědět
10. října 3:07
Programátor dělá co umí, počítač si dělá co chce.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.