Lekce 19 - Plovoucí obsah v CSS3

V předchozím kvízu, Kvíz - Rozměry a pozice prvků v CSS3, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

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í CSS3 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>

CSS třídy .vlevo je jasný:

.vlevo
{
   float: left;
}

Výsledek:

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

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:

Bez vlastnosti clear by to tedy vypadalo takto:

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