Floatide mõju vanemale CSS-is
Oletame nüüd, et meil on div, milles asub
pilt. Div-ile määrame piiri, pildile
aga ei määra omadust float esialgu.
Vaatame, kuidas see brauseris välja näeb:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
:
Nüüd määrame pildile omaduse
float väärtusega left. Sel
juhul juhtub imeline asi - vanema kõrgus
kaob, selle alumine piir algab kohe peale
ülemist ning pilt hakkab alla oma vanemast
välja ulatuma:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: left;
}
:
Selgub, et elementidel, millele on määratud
omadus float, ei suurenda oma
vanemat kõrguses.
Paneme omadusele float väärtuseks right
asemel left. Vanema käitumine
ei muutu, kuid pilt hakkab ujuma paremal:
<div>
<img src="img.png" alt="">
</div>
div {
border: 1px solid red;
}
img {
float: right;
}
:
