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

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

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

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат:

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

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат:

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

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  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 есть, только абзацы на самом деле размещены под картинкой. Давайте уберем отступ, оставив при этом полупрозрачность картинке:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат:

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

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

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

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

Результат:

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