Ievads CSS float īpašībā

Pieņemsim, ka mums ir div ar kādu garu tekstu. Ievietosim šī teksta sākumā attēlu:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}

Kā jūs redzat, attēla apakšdaļa atrodas pirmajā teksta rindā, bet pārējā daļa iet uz augšu. Pa labi no attēla veidojas liela tukša vieta. Padarīsim tā, lai teksts aizpildītu šo tukšo vietu. Lai to izdarītu, attēlam iestatīsim īpašību float ar vērtību left:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Tātad, tagad attēls peld pa kreisi, bet teksts to apņem attiecīgi pa labi. Tajā pašā laikā tukšā vieta attēla sānos ir pazudusi.

Var panākt, lai attēls peldētu ne pa kreisi, bet pa labi. Lai to izdarītu, float jāiestata ar vērtību right:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Paņemiet garu tekstu. Ievietojiet sākumā vienu attēlu, bet vidū - citu. Iestatiet tā, lai pirmais attēls peldētu pa kreisi, bet otrais - pa labi.