CSS에서 float 속성 소개

긴 텍스트가 있는 div가 있다고 가정해 봅시다. 이 텍스트 시작 부분에 이미지를 삽입해 보겠습니다:

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

div {
	width: 400px;
	text-align: justify;
}

보시다시피, 이미지 하단은 텍스트 첫 줄에 위치하고 나머지 부분은 위로 올라갑니다. 이미지 오른쪽에는 큰 빈 공간이 생깁니다. 이 빈 공간을 텍스트로 채우도록 만들어 봅시다. 이를 위해 이미지에 float 속성을 값 left로 설정합니다:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

이제 이미지는 왼쪽에 떠 있고, 텍스트는 그에 따라 오른쪽으로 흐릅니다. 이로 인해 이미지 옆의 빈 공간이 사라졌습니다.

이미지를 왼쪽이 아닌 오른쪽에 떠 있도록 만들 수도 있습니다. 이를 위해 float를 값 right로 설정합니다:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

긴 텍스트를 준비하세요. 텍스트 시작 부분에 하나의 이미지를, 중간 부분에 다른 이미지를 삽입하세요. 첫 번째 이미지는 왼쪽에, 두 번째 이미지는 오른쪽에 떠 있도록 만드세요.