Peldēšanās ir viens no būtiskajiem CSS konceptiem. Bez šīs pamatprincipa sapratnes nav iespējams izveidot tīmekļa lapas, pamatojoties uz CSS. Peldēšanu var ļoti labi tulkot kā "plūdumu", kas precīzi paskaidro lietu. Galu galā peldēšana nozīmē vienkārši to, ka elements tiek izvietots pa labi vai pa labi blakus citam elementam. (Parasti elements atrastos zem cita elementa).
Pirmajā piemērā tas būs skaidrāk.
<p><img src="bild.jpg" /> Šajā komplektā ir 12 veidotas formas, ko varat izmantot savos plakātos, fona lapās utt. Formas ir sadalītas 18, 21 un 24 joslu grupās, kā arī dažādās stariņu platības. Šie Presets ir labs pamats skaistām efektu izveidei jūsu izkārtojumos un attēlos.</p>
Šeit ir definēts teksta bloks. Šajā tekstā ir attēls un parasts teksts.
Paskatoties uz rezultātu, redzams, ka attēls atrodas teksta plūsmā.
Tagad iesaistās `float` savīšanā.
img { float: left;}
Parādīt rezultātus vēlreiz.
Šeit attēls tiek peldēts. Teksts plūst ap attēlu.
Piekļuves īpašībai `float` var piešķirt vērtības `left` un `right`, lai elementu novietotu pa kreisi (`float: left`) vai pa labi (`float: right`) "plūdītu".
Varat arī izmēģināt piešķirt `float: right` attēlam.
Šajā gadījumā notiek trīs lietas:
• Grafika tiek izņemta no normālā plūsma.
• Tā pārvietojas `p` elementā pilnībā augšup.
• Tā tiek rādīta pēc iespējas labāk pa labi.
Paskatoties uz līdz šim iegūto rezultātu, ir skaidrs, ka tas vēl neizskatās īsti skaisti. Patiesībā trūkst attālumi starp attēlu un apjoza tekstu. Lai labotu sintaksi, piereģistrējiet to sekojoši:
img {
float: left;
margin-right: 20px;
}
Attēlam piešķirts 20 pikseļu labais malu platumu. Tas rada šādu skatu:
Peldēšanas beigas
<p><img src="bild.jpg" />Šajā komplektā ir 12 veidotas formas, ko varat izmantot savos plakātos, fona lapās utt. Formas ir sadalītas 18, 21 un 24 joslu grupās, kā arī dažādās stariņu platības. Šie Presets ir labs pamats skaistām efektu izveidei jūsu izkārtojumos un attēlos.</p> <p>Šajā komplektā ir 12 veidotas formas, ko varat izmantot savos plakātos, fona lapās utt. Formas ir sadalītas 18, 21 un 24 joslu grupās, kā arī dažādās stariņu platības. Šie Presets ir labs pamats skaistām efektu izveidei jūsu izkārtojumos un attēlos.</p>
Rezultāts izskatās šādi:
Patiesībā ne tikai pirmās rindas bloks apjoza grafiku. Tas pats attiecas arī uz otro teksta bloku. Tas ir tikai un vienīgi tāpēc, ka grafika pārsniedz pirmo rindu. Lai labāk saprastu, es norādu fona krāsu teksta blokam, kurā ietverta grafika.
clear`. Jo tā pabeidz peldēšanu. `clear` piespiež nākamo elementu patiešām sākt zemāk par peldēto elementu, nevis blakus tam. `clear` īpašībai ir šādi vērtības:
• `left` - beidz `float: left`
• `right` - beidz `float: right`
• `both` - beidz gan `float: right`, gan `float: left`
Apakšējā piemērā otrajam tekstam ir piešķirts `clear: left`, lai pabeigtu peldēšanu.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />Šajā komplektā ir 12 veidotas formas, ko varat izmantot savos plakātos, fona lapās utt. Formas ir sadalītas 18, 21 un 24 joslu grupās, kā arī dažādās stariņu platības. Šie Presets ir labs pamats skaistām efektu izveidei jūsu izkārtojumos un attēlos.</p>
<p style="clear:left;">Šajā komplektā ir 12 veidotas formas, ko varat izmantot savos plakātos, fona lapās utt. Formas ir sadalītas 18, 21 un 24 joslu grupās, kā arī dažādās stariņu platības. Šie Presets ir labs pamats skaistām efektu izveidei jūsu izkārtojumos un attēlos.</p>
</body>
</html>
Parādīto sintakses ceļā otro fragmentu tagad tiešām attēlo zem attēla.
Vēlams izmantot clear: both vietoj clear: left vai clear: right visos gadījumos. Tāpēc ieteicams viegli izveidot atbilstošu klasi savā stilu lapā, ko pēc nepieciešamības izsaukt.
.clearing {
clear: both;
}
Šo klasi varat izmantot vienmēr, kad vēlaties pārtraukt elementa plūsmu.
<p class="clearing">Saturi ...</p>
Kāpēc ir noderīgi floatošana
Protams, floatošana nav nepieciešama tikai teksta plūsmai saistībā ar attēliem. Patiesībā tā veido pamata konceptu CSS bāzētajām tīmekļa lapām. Pateicoties floatošanai, daudzkolonnīgos izkārtojumus var īstenot ļoti vienkārši. Apskatiet šo piemēru:
<!DOCTYPE html>
<html lang="lv">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Mājaslapa</li>
<li>Kontakti</li>
<li>Impressum</li>
</ul>
</div>
<div id="inhalt">
Šeit atrodas tīmekļa vietnes saturs.
</div>
</body>
</html>Šeit tiek izveidots divu kolonnu izkārtojums. Īpatnība ir tāda, ka kolonnas atrodas blakus viena otrai.
Šis blakus viens otram atradīšanās process tiek realizēts, pamatojoties uz Plūstošajiem konceptu. Sīkāka informācija par tīmekļa lapu izveidi, pamatojoties uz floatošana, sekos šī sērijas turpmākajos posmos.
