Kelluvat elementit
Toinen keino irrottaa elementtejä normaalista elementtijärjestyksestä
on niiden kelluttaminen, eli float
-ominaisuuden käyttö. Elementtien
sijoittelu position
-ominaisuudella on toisinaan tarpeellista, mutta
usein kätevämpi tapa elementin paikan määräämiseen on sen määrääminen
kelluvaksi.
Kellutus on toimiva tapa esimerkiksi pitkän juoksevan tekstin seassa
olevien kuvien sijoitteluun. Normaalistihan <img>
-elementit ovat
inline-block
-tyyppisiä, eli asettuvat tekstiriville yksittäisen
kirjaimen tavoin.
Kellutettaessa elementti sijoitetaan normaalin elementtivirran jompaankumpaan reunaan, vasemmalle tai oikealle, ja muut sen jälkeen tulevat elementit tai tekstit kiertävät sen ympäri.
Float
float
-ominaisuus voi saada arvokseen jonkin kolmesta avainsanasta
left
, right
tai none
sen mukaan halutaanko kelluttaa vasemmalle,
oikealle vai purkaa kellutus.
- Tekstitason sisältö (
inline
- jainline-block
-elementit) kiertää automaattisesti kellutettuja elementtejä. - Lokotason elementit piirretään ikään kuin kellutettuja elementtejä
ei olisi olemassa. Ne voivat siis jäädä (
z-index
-arvosta riippuen) kellutettujen elementtien alle tai päälle.
p {
width: 70%;
margin: 0 auto;
text-align: justify;
}
.kelluva {
float: right;
margin: 0.5em 0 0.5em 0.5em;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus
gravida pulvinar. Donec ut metus fermentum, elementum ipsum nec, aliquam
lacus. <img src="ghost-penguin.png"> Sed eu tortor ex. Curabitur ligula tellus, scelerisque non dapibus
venenatis, tempus porttitor diam. In hac habitasse platea dictumst. Praesent
eu lacinia ex. Etiam scelerisque viverra lorem, ut fringilla enim gravida et.
Praesent venenatis nisi id sagittis laoreet. Nullam vitae risus efficitur, facilisis
justo vitae, mollis felis. <img src="ghost-penguin.png" class="kelluva">
Pellentesque ac efficitur urna. Nam ultricies diam
ut efficitur tincidunt. Ut vulputate pretium justo, sit amet maximus tortor
aliquet sed. Morbi ut lectus euismod, tempor tellus vel, finibus erat. Praesent
rhoncus, velit sit amet varius fringilla, lorem est commodo odio, eu ullamcorper
nisl nulla nec nunc. Vivamus facilisis, justo nec vestibulum gravida, mauris diam
consectetur felis, accumsan gravida eros risus nec massa. Quisque lobortis ut est
vitae porttitor.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus maximus gravida pulvinar. Donec ut metus fermentum, elementum ipsum nec, aliquam lacus. Sed eu tortor ex. Curabitur ligula tellus, scelerisque non dapibus venenatis, tempus porttitor diam. In hac habitasse platea dictumst. Praesent eu lacinia ex. Etiam scelerisque viverra lorem, ut fringilla enim gravida et. Praesent venenatis nisi id sagittis laoreet. Nullam vitae risus efficitur, facilisis justo vitae, mollis felis. Pellentesque ac efficitur urna. Nam ultricies diam ut efficitur tincidunt. Ut vulputate pretium justo, sit amet maximus tortor aliquet sed. Morbi ut lectus euismod, tempor tellus vel, finibus erat. Praesent rhoncus, velit sit amet varius fringilla, lorem est commodo odio, eu ullamcorper nisl nulla nec nunc. Vivamus facilisis, justo nec vestibulum gravida, mauris diam consectetur felis, accumsan gravida eros risus nec massa. Quisque lobortis ut est vitae porttitor.
Useampia elementtejä voidaan kelluttaa samaan reunaan (tai eri reunoihin). Jos peräkkäin kellutetut elementit mahtuvat rinnakkain, ne asettuvat rinnakkain. Tämä mahdollistaa siis esimerkiksi useamman elementin asettelun rinnakkain.
.ulompi {background-color: #ffa; padding: 1em; margin: 1em; min-height: 2em;}
.laatikko {width: 3em; height: 1em; padding: 0.5em; border: 1px solid black;}
.toka .laatikko {float: left;}
.kolmas .laatikko {float: right;}
<div class="ulompi eka">
<div class="laatikko">div1</div>
<div class="laatikko">div2</div>
<div class="laatikko">div3</div>
<div class="laatikko">div4</div>
<div class="laatikko">div5</div>
</div>
<div class="ulompi toka">
<div class="laatikko">div1</div>
<div class="laatikko">div2</div>
<div class="laatikko">div3</div>
<div class="laatikko">div4</div>
<div class="laatikko">div5</div>
</div>
<div class="ulompi kolmas">
<div class="laatikko">div1</div>
<div class="laatikko">div2</div>
<div class="laatikko">div3</div>
<div class="laatikko">div4</div>
<div class="laatikko">div5</div>
</div>
Clear
Mikäli jokin elementti halutaan piirtää kelluvien elementtien perään, eli “unohtavan” elementtien kellumisen,
sille voidaan käyttää css:n clear
-ominaisuutta. Ominaisuus voi saada arvokseen jonkin avainsanoista
left
, right
tai both
riippuen siitä, halutaanko sen “unohtavan” vasemman, oikean vai molempien puolten
elementtien kellutukset. Elementti, jolle on asetettu clear
-ominaisuus, siis “putsaa” tai “tyhjentää” kaikki
meneillään olevat halutun puolen kellutukset.
Kellutuksen käyttökohteita
Elementtien kellutus on kätevää erityisesti, kun:
- Halutaan saada kuvan, taulukon tai muu elementti tekstipalstan yhteyteen niin, että teksti kiertää sitä.
- Halutaan saada useampi kuin yksi elementti rinnakkain. (esimerkiksi valikko vasemmalle ja sisältö oikealle)
- Halutaan saada useampi kuin yksi lohkotason elementti rinnakkain.