CSS에서 플로트 부모 내 텍스트

div의 height 속성을 제거하고 이미지 앞에 약간의 텍스트를 넣어 봅시다.

이 경우 div의 높이는 텍스트 높이와 같아지고, 이미지는 여전히 div를 벗어나게 됩니다:

<div>
	text
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

텍스트를 이미지 뒤에 놓아봅시다 - 결과는 변하지 않습니다:

<div>
	<img src="img.png" alt="">
	text
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

이미지가 왼쪽으로 플로팅되도록 만들어 봅시다 - 결과는 유사합니다:

<div>
	<img src="img.png" alt="">
	text
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

아래에 또 다른 div를 추가해 봅시다 - 이미지가 그 위에도 겹치게 됩니다:

<div>
	<img src="img.png" alt="">
	text
</div>
<div>
	text
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

그러나 첫 번째 div에 이미지 높이보다 훨씬 많은 텍스트를 추가하면, 이미지는 두 번째 div 위에 겹치지 않습니다:

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

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

이 점은 매우 중요합니다 - 개발 중에는 특정 블록에 충분한 텍스트가 있을 수 있지만, 실제 사이트 운영 시 해당 블록에 계획된 것보다 적은 텍스트가 들어갈 수 있습니다. 그 결과 플로팅 요소가 인접한 블록에 겹치는 문제가 발생할 수 있습니다.