Float

CSS vlasnosť float označuje, či má element plávať do strany, alebo nie. Pokiaľ áno, ostatné elementy okolo neho obtekajú. Pokiaľ má element použitú aj vlastnosť position: absolute, tak sa float neprejaví.

Môže nadobúdať hodnoty:

  • none – žiadne, predvolená hodnota
  • left – vľavo
  • right – vpravo
  • initial – pôvodná predvolená hodnota
  • inherit – rovnaká hodnota ako nadradený rodičovský element

Zrušenie obtekania ďalších elementov

Pokiaľ chceme, aby elementy, ktoré sú definované za plávajúcim blokom, neobtekali náš element. Použijeme vlastnosť clear na nasledujúcom elemente.

Zrušenie obtekania ďalších elementov nasledujúcim elementom

HTML

<img src="http://zuzana.kepesiova.sk/logo_m.png" alt="Egara" width="785" height="181">
<p>Toto je text. Toto je text. Toto je text. Toto je text. Toto je text. Toto je text. Toto je text.</p>
<p class="clear">Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. Toto je iný text. </p>

CSS

img {
    float: left;
}

.clear {
    clear: both;
}

Zrušenie obtekania ďalších elementov nadradeným elementom

Pokiaľ je element vyšší, ako element, ktorý ho obsahuje, a je zároveň zarovnaný – plávajúci, tak bude cez svoj rodičovský element pretekať. Na to, aby ostal naďalej plávajúcim a zároveň nepretekal cez svoj nadradený element aplikujeme CSS vlastnosti clear na pseudoelementy nadradeného elementu.

Pseudoelementy sa vytvárajú v CSS pomocou zápisu:

  • element:before – pseudoelement pred všetkými detskými elementami, nachádzajúcimi sa v ňom.
  • element:after – pseudoelement za všetkými detskými elementami, nachádzajúcimi sa v ňom.
div:before {
    content: "/";
}

div:after {
    content: "";
}

Na to, aby sa element vykreslil je potrebné mu priradiť vlastnosť content. Tá označuje, čo sa v danom elemente má nachádzať. Pokiaľ nechceme zobraziť žiadny text, alebo špeciálny znak, tak vložíme ako hodnotu prázdny reťazec. Predvolená hodnota je content: none, čím sa nám pseudoelement v štruktúre nevytvorí.

HTML

<p>Obrázok je vyšší ako rodičovský element a preteká.</p>

<div><img src="http://zuzana.kepesiova.sk/logo_m.png" alt="Egara" width="785" height="181">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p class="clear-right">Pre odstránenie pretekania je potrebné pridať rodičovskému elementu triedu clearfix, ktorej v CSS priradíme príslušné vlastnosti.</p>

<div class="clearfix"><img src="http://zuzana.kepesiova.sk/logo_m.png" alt="Egara" width="785" height="181">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

CSS

img {
    float: right;
}

div {
    border: 10px solid #000000;
}

.clear-right {
    clear: both;
}

.clearfix:before,
.clearfix:after {
    content: "";
    clear: both;
    display: table;
}