CSS에서 태그 아래에 위치한 플로팅 요소

지금 우리에게는 두 개의 단락과 첫 번째 단락 안에 배치된 이미지가 있다고 가정해 보겠습니다. 이 이미지에는 float 속성이 right 값으로 설정되어 있고, 반투명도도 지정되어 있습니다:

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

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

Результат:

이제 HTML 코드에서 이미지를 첫 번째 단락 뒤로 옮기고 어떻게 되는지 살펴보겠습니다:

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

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

Результат:

보시다시피, 이미지는 두 번째 단락의 텍스트에 의해 감싸이지만, 첫 번째 단락의 텍스트에는 감싸이지 않습니다.

이미지를 두 번째 단락 뒤로 완전히 옮겨 보겠습니다. 이 경우 이미지는 오른쪽에 떠 있지만, 어떤 텍스트도 이미지를 감싸지 않을 것입니다:

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

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

Результат:

결과적으로, 플로팅 요소를 감쌀 수 있는 요소는 그 아래에 위치한 요소들뿐이며, 그 위에 위치한 요소들은 감쌀 수 없습니다.