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

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

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

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

cssdiv {
  border: 1px solid red;
}

Результат:

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

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

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

Результат:

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

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

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

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

Результат: