Kombinácia float a margin v CSS

Teraz je náš text pritlačený k obrázku na ľavej strane. Skúsme tento text trochu posunúť. Na to nastavme našim odsekom ľavý margin na 30px a nadradenému divu - červený okraj.

Nečakane sa posunie doprava iba text, ktorý prilieha k nadradenému divu, zatiaľ čo text, ktorý prilieha k obrázku - sa neposunie:

<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;
}

Aby sme pochopili, prečo je to tak, pridajme odsekom zelený okraj:

<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;
}

Ako vidíme, v skutočnosti sa odseky odsúvajú od ľavého okraja, ale nie od obrázka, ale od nadradeného divu. Aby sme to videli podrobnejšie, pridajme ešte polopriehľadnosť obrázku pomocou vlastnosti 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;
}

Teraz už jasne vidno, že reakcia na margin-left je, lenže odseky sú v skutočnosti umiestnené pod obrázkom. Zoberme si odsadenie, pričom necháme polopriehľadnosť obrázku:

<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;
}

Takto v skutočnosti vyzerajú naše odseky - ich text je posunutý obrázkom, no fyzicky odseky ležia pod obrázkom, to je vidieť podľa okraja, ktorý začína od ľavého okraja nadradeného divu.

Vráťme margin a vložme obrázok do prvého odseku:

<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;
}

Teraz sa obrázok pohybuje spolu s odsekmi!