Působení floatů na rodiče v CSS
Nyní mějme div, ve kterém je
obrázek. Divu nastavme ohraničení a obrázku
zatím nenastavujme vlastnost float.
Podívejme se, jak to bude vypadat v prohlížeči:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
:
Nyní nastavme obrázku vlastnost
float s hodnotou left. V tomto
případě dojde k úžasné věci - výška
rodiče zmizí, jeho spodní ohraničení bude
začínat hned po horní a obrázek
vyleze zespodu svého rodiče:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Vychází to tak, že prvky, kterým je nastavena
vlastnost float, nerozšiřují svého
rodiče na výšku.
Nastavme vlastnosti float místo left
hodnotu right. Chování
rodiče se nezmění, ale obrázek se začne
vznášet vpravo:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
