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

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

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

div {
	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>
	<img src="img.png" alt="">
	<p>
		some long text
	</p>
</div>

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

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

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

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

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

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