23. diel - Plávajúce obsah v CSS 3

V minulej lekcii, Rozmery prvkov v CSS , sme sa zaoberali CSS vlastnosťami upravujúcimi rozmery (teda výšku a šírku) HTML prvkov.

V tejto lekcii sa pozrieme na vlastnosť float, ktorou sa nastavuje tzv. Plávajúce obsah, teda obsah, okolo ktorého obteká iný obsah (napríklad text okolo obrázku). Následne sa zameriame na vlastnosť clear, ktorou sa potom vytýči koniec obtekanie, resp. oblasť, v ktorej obtekanie už nemá nastávať.

Float

Pomocou CSS 3 vlastnosti float nastavujeme, či má byť element plávajúce. Tieto elementy sú vyňaté z klasického rozloženia stránky a sú neplovoucím obsahom obtekané. Jednoduchým príkladom je obrázok, ktorý môže byť vložený klasicky do riadku alebo môže byť textom vynechaný a zasahovať teda do viacerých riadkov. Pomocou tejto vlastnosti možno poskladať niekoľko blokových elementov vedľa seba, využíva sa teda pri tvorbe layoutu webu.

Hodnoty

• left - Element pláva (je vynechaný) po ľavej strane a je neplovoucím obsahom vynechaný sprava.
• right - Element pláva po pravej strane a je neplovoucím obsahom vynechaný zľava.
• none - Element nie je plávajúce. Pokiaľ je teda vložený v texte, zobrazí sa presne na mieste, kde je vložený.
• inherit - Vlastnosť float bude zdedená od rodičovského elementu.

Ukážka

Nastavme si k obrázku vtákov a textu Lorem ipsum obtekania zľava (left):

<img src="ptaci.png" alt="Ptáci" 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 triedy .vlevo je jasný:

.vlevo
{
   float: left;
}

výsledok:

Bez plávanie (nastavenie obtekania) by obrázok vyzeral takto (nastavíme float na none, ale samozrejme by stačilo vlastnosť len vynechať):

Clear

Pomocou CSS3 vlastnosti clear nastavujeme, v ktorej časti elemente nie je povolený plávajúce obsah. Hovoríme o tom, že plávajúce obsah zastavíme.

Hodnoty

• left - Na ľavej strane elementu nie je povolený plávajúce obsah.
• right - Na pravej strane elementu nie je povolený plávajúce obsah.
• both - Na oboch stranách elementu nie je povolený plávajúce obsah.
• none (predvolené) - Plávajúce obsah je povolený na oboch stranách elementu, teda zľava i sprava.
• inherit - Vlastnosť clear bude zdedená od rodičovského elementu.

Ukážka

Umiestni plávajúce obrázok na ľavú časť a nechajme ho obtekať textom. Potom si ale rozmyslíme, že ďalšie odsek už nechceme mať obtekaný. Preto tu nastavíme clear na both, čím sa obtekanie zastaví a už ďalej nepokračuje. K zastaveniu obtekanie sa často používa značka <br> alebo rovno div:

<img src="ptaci.png" alt="Ptáci" 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>

Trieda .vlevo samozrejme stále platí, pridáme ďalšiu triedu .clear:

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

výsledok:

Bez vlastnosti clear by to teda vyzeralo takto:

V nasledujúcej lekcii, Pretekaniu obsahu v CSS 3 , sa pozrieme na vlastnosti upravujúce prvky v prípade pretekajúceho obsahu.