Kombinace float a margin v CSS

Nyní je náš text přitlačen k obrázku z levé strany. Zkusme tento text trochu odsunout. K tomu nastavme našim odstavcům levý margin na 30px a nadřazenému divu - červený okraj.

Neočekávaně se doprava odsune pouze text, který přiléhá k nadřazenému divu, zatímco text přiléhající k obrázku se neodsune:

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

Abychom pochopili, proč tomu tak je, přidejme odstavcům 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;
}

Jak vidíme, odstavce se ve skutečnosti odsouvají od levého okraje, ale ne od obrázku, nýbrž od nadřazeného divu. Podívejme se na to podrobněji, přidejme obrázku poloprůhlednost pomocí 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;
}

Nyní je již jasně vidět, že reakce na margin-left je, ale odstavce jsou ve skutečnosti umístěny pod obrázkem. Odeberme odsazení, ale ponechme obrázku poloprůhlednost:

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

Takhle ve skutečnosti naše odstavce vypadají - jejich text je odsunut obrázkem, ale fyzicky odstavce leží pod obrázkem, což je vidět na okraji, který začíná od levého okraje nadřazeného divu.

Vraťme margin a vložme obrázek do prvního odstavce:

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

Nyní se obrázek pohybuje spolu s odstavci!