Сочетание float и margin

Сейчас наш текст прижат к картинке с левой стороны. Давайте попробуем немного отодвинуть этот текст. Для этого зададим нашим абзацам левый margin в 30px, а диву-родителю - красную границу.

Неожиданно вправо отступит только тот текст, который прилегает в диву-родителю, а текст, прилегающий к картинке - не отодвинется:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		длинный текст
	</p>
</div>

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

Чтобы понять, почему это так, добавим абзацам зеленую границу:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		длинный текст
	</p>
</div>

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

Как мы видим, на самом деле абзацы отодвигаются от левого края, но не от картинки, а от дива-родителя. Чтобы рассмотреть подробнее, давайте добавим еще и полупрозначность картинке через свойство opacity:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		длинный текст
	</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;
}

Вот теперь точно видно, что реакция на margin-left есть, только абзацы на самом деле размещены под картинкой. Давайте уберем отступ, оставив при этом полупрозрачность картинке:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		длинный текст
	</p>
</div>

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

Вот так на самом деле выглядят наши абзацы - их текст отодвинут картинкой, но физически абзацы лежат под картинкой, это видно по границе, которая начинается от левого края дива-родителя.

Давайте вернем margin и засунем картинку в первый абзац:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		длинный текст
	</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;
}

Теперь картинка двигается вместе с абзацами!