Float

Lastnosti float in clear določata obnašanje lebdečih elementov v običajnem toku postavitve. Z njima lahko element potisnemo ob levi ali desni rob in določimo, kdaj se mora naslednja vsebina nadaljevati pod takimi elementi.

Danes lastnost float najpogosteje uporabljamo za manjše primere, predvsem za oblivanje besedila okoli slike ali drugega manjšega elementa. Za postavitev večjih delov strani pa so praviloma primernejše sodobnejše rešitve, kot sta flex in grid.

Osnovna pravila

• Lastnost float postavi element ob levi ali desni rob nadrejenega elementa.
• Besedilo in drugi vrstični elementi se lahko nato ovijajo okoli lebdečega elementa.
• Lastnost clear določa, ali se mora element pomakniti pod predhodne lebdeče elemente.
• Za bolj pregleden videz lebdečemu elementu pogosto dodamo tudi zunanji odmik z lastnostjo margin.
• Za večje postavitve strani float navadno ni več prva izbira.

Lastnost float

Z lastnostjo float element postavimo ob levi ali desni rob nadrejenega elementa. Besedilo in drugi vrstični elementi se nato ovijajo okoli njega. To je uporabno predvsem pri slikah v besedilu, ikonah ali manjših vsebinskih blokih.

Najpogostejši primer uporabe je lebdeča slika, okoli katere se ovija besedilo:

<p><img src="obala.jpg" width="204" height="182" alt="Deklica na obali" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci 
quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. 
Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum 
convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor 
tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt 
ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et 
magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus 
consectetur aliquam. Nulla facilisi.</p>

img {
   float: right;
   margin: 0 0 1em 1em;
}

Zunanji odmik pri sliki izboljša berljivost, saj besedilo ni preveč stisnjeno ob rob slike.

Lastnost clear

Z lastnostjo clear določimo, ali se mora element premakniti pod prej zapisane lebdeče elemente. To uporabimo takrat, ko želimo prekiniti oblivanje in nadaljevati vsebino pod lebdečim elementom.

V naslednjem primeru je slika lebdeča, drugi odstavek pa ima določeno clear: both;, zato se začne pod sliko.

<img src="obala.jpg" width="204" height="182" alt="Deklica na obali" />
<p class="ozadje">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci 
quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. 
Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="clear">Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat 
nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer 
tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse 
et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus 
consectetur aliquam. Nulla facilisi.</p>

img {
   float: right;
   margin: 0 0 1em 1em;
}

p.ozadje {
   background-color: #FCCC88;
   padding: 5px;
}

p.clear {
   clear: both;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet orci quam. Quisque venenatis metus id urna placerat, sed aliquet metus tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Vestibulum convallis velit ut velit fermentum aliquam. Donec aliquet erat nec tempor tincidunt. Praesent ut gravida ante, eget placerat nulla. Integer tincidunt ipsum eget velit dapibus hendrerit. Nam nec egestas arcu. Suspendisse et magna aliquet, cursus tellus a, convallis mi. Aenean quis magna at metus consectetur aliquam. Nulla facilisi.

Primerjava lastnosti float in clear

Obe lastnosti pogosto uporabljamo skupaj: najprej elementu določimo float, nato pa naslednjemu elementu po potrebi še clear.

Vrednost flow-root

Pri delu z lebdečimi elementi se lahko zgodi, da nadrejeni element ne zajame pravilno njihove višine. To pomeni, da je lebdeči element sicer viden, vendar rob ali ozadje nadrejenega elementa ne sega čez celotno vsebino. V takem primeru lahko uporabimo display: flow-root;.

Vrednost flow-root povzroči, da element ustvari nov blokovni kontekst oblikovanja. S tem njegova notranja postavitev deluje kot samostojna celota, zato nadrejeni element pravilno zajame tudi lebdeče elemente v svoji notranjosti.

To je posebej uporabno takrat, ko želimo ohraniti rob, ozadje ali odmik okoli skupine elementov, v kateri je tudi lebdeči element.

<div class="okvir">
  <img src="obala.jpg" width="140" height="125" alt="Deklica na obali" />
  <p>Besedilo teče ob sliki. Ker ima nadrejeni element določeno
  lastnost display: flow-root;, pravilno zajame tudi lebdečo sliko.</p>
</div>

.okvir {
  display: flow-root;
  border: 2px solid #FBA517;
  background-color: #FEF3D0;
  padding: 10px;
}

.okvir img {
  float: left;
  margin: 0 1em 0.5em 0;
                  }

Besedilo teče ob sliki. Ker ima nadrejeni element določeno lastnost display: flow-root;, pravilno zajame tudi lebdečo sliko, zato rob in ozadje ostaneta okoli celotnega bloka.

Priporočila

• Lastnost float uporabljaj predvsem za manjše vsebinske elemente, kot so slike v besedilu.
• Lebdečemu elementu dodaj zunanji odmik, da bo besedilo bolje berljivo.
• Ko želiš prekiniti oblivanje, uporabi clear pri naslednjem elementu.
• Za postavitev večjih delov strani raje uporabi flex ali grid.
• Pri logičnih vrednostih inline-start in inline-end upoštevaj smer pisanja besedila.

Pogoste napake

• Lastnost float se uporablja za celotno postavitev strani, čeprav je primernejša predvsem za oblivanje manjših elementov.
• Lebdečemu elementu ni dodan zunanji odmik, zato je besedilo preblizu slike ali drugega elementa.
• Lastnosti clear ni, čeprav bi morala naslednja vsebina začeti pod lebdečim elementom.
• Zamenjevanje pomena lastnosti float in clear.
• Predpostavlja se, da bo starševski element vedno pravilno zajel višino lebdečih elementov brez dodatne ureditve postavitve.