Combinazione di float e margin in CSS

Attualmente il nostro testo è premuto contro l'immagine sul lato sinistro. Proviamo a spostare leggermente questo testo. Per farlo, impostiamo ai nostri paragrafi un margin sinistro di 30px, e al div genitore - un bordo rosso.

Improvvisamente si sposterà a destra solo il testo che è adiacente al div genitore, mentre il testo adiacente all'immagine - non si sposterà:

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

Per capire perché succede questo, aggiungiamo ai paragrafi un bordo verde:

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

Come possiamo vedere, in realtà i paragrafi si stanno spostando dal bordo sinistro, ma non dall'immagine, bensì dal div genitore. Per esaminarlo più in dettaglio, aggiungiamo anche una semitrasparenza all'immagine tramite la proprietà 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;
}

Ora si vede chiaramente che la reazione a margin-left c'è, solo che i paragrafi in realtà sono posizionati sotto l'immagine. Togliamo il margine, lasciando comunque la semitrasparenza all'immagine:

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

Ecco come appaiono in realtà i nostri paragrafi - il loro testo è spostato dall'immagine, ma fisicamente i paragrafi si trovano sotto l'immagine, questo è visibile dal bordo, che inizia dal bordo sinistro del div genitore.

Reinseriamo il margin e mettiamo l'immagine nel primo paragrafo:

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

Ora l'immagine si muove insieme ai paragrafi!