Поєднання 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;
}

Тепер картинка рухається разом із абзацами!