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;
}

長いテキストを用意してください。テキストの先頭に 1枚目の画像を、途中に2枚目の画像を挿入してください。 1枚目の画像が左にフロートし、2枚目の画像が右にフロートするように設定してください。