CSS에서 float 속성을 사용할 때 요소 간 침투 현상

이제 텍스트가 단락 안에 배치되고, float 속성이 지정된 이미지가 이 단락들 위에 위치한다고 가정해 봅시다. 이 경우 다른 태그의 존재는 흐름에 방해되지 않으며, 모든 것이 기존과 동일하게 작동합니다:

html<div>
  <img src="img.png" alt="">
  <p>
    some long text
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
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;
}
img {
  float: left;
}

Результат: