Pôsobenie floatov na rodiča v CSS
Teraz máme div, v ktorom je
obrázok. Divu nastavíme rámček, ale obrázku
zatiaľ nenastavíme vlastnosť float.
Pozrime sa, ako to bude vyzerať v prehliadači:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
:
Teraz nastavme obrázku vlastnosť
float na hodnotu left. V tomto
prípade sa stane úžasná vec - výška
rodiča zmizne, jeho spodný rámček bude
začínať hneď po hornom a obrázok
vyčnieva spoza svojho rodiča:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Ukazuje sa, že elementy, ktoré majú nastavenú
vlastnosť float, nerozširujú svojho
rodiča na výšku.
Nastavme vlastnosti float namiesto left
hodnotu right. Správanie
rodiča sa nezmení, ale obrázok sa začne
plávať vpravo:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
