Float ir margin derinys CSS

Dabar mūsų tekstas yra prigludęs prie paveikslėlio kairėje pusėje. Pabandykime šį tekstą šiek tiek atitolinti. Norėdami tai padaryti, nustatykime savo pastraipoms kairįjį margin 30px, o tėviniam div'ui - raudoną sienelę.

Netikėtai į dešinę atsitrauks tik tas tekstas, kuris prigludęs prie tėvinio div'o, o tekstas, prigludęs prie paveikslėlio - neatsitrauks:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
}
img {
	float: left;
}

Kad suprastume, kodėl taip yra, pridėkime pastraipoms žalią sienelę:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
}

Kaip matome, iš tikrųjų pastraipos atsitraukia nuo kairiojo krašto, bet ne nuo paveikslėlio, o nuo tėvinio div'o. Kad išsamiau išnagrinėtume, pridėkime dar ir paveikslėlio pusiau skaidrumą per savybę opacity:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Dabar jau aiškiai matome, kad reakcija į margin-left yra, tik pastraipos iš tikrųjų yra išdėstytos po paveikslėliu. Pašalinkime atstumą, palikdami paveikslėlio pusiau skaidrumą:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Štai kaip iš tikrųjų atrodo mūsų pastraipos - jų tekstas yra atstumtas paveikslėlio, tačiau fiziškai pastraipos guli po paveikslėliu, tai matyti pagal sienelę, kuri prasideda nuo kairiojo tėvinio div'o krašto.

Grąžinkime margin ir įdėkime paveikslėlį į pirmąją pastraipą:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Dabar paveikslėlis juda kartu su pastraipomis!