CSSにおけるフロートの親要素への影響

次に、画像を含むdiv要素があるとします。 divに枠線を設定し、画像にはまだ floatプロパティを設定しません。

ブラウザでどのように表示されるか見てみましょう：

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

div {
	border: 1px solid red;
}

次に、画像のfloatプロパティを leftに設定してみましょう。この場合、驚くべきことが起こります - 親要素の高さがなくなり、その下端の枠線が上端の直後に始まり、画像は親要素の下からはみ出してしまいます：

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

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

つまり、floatプロパティが設定された要素は、 親要素の高さを伸ばさないということです。

floatプロパティの値をleftではなく rightに変更してみましょう。親要素の動作は変わりませんが、画像は右側にフロートし始めます：

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

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