CSSのfloatプロパティ入門

長いテキストを含むdivがあるとします。 このテキストの先頭に画像を挿入してみましょう：

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

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

Результат:

ご覧の通り、画像の下端はテキストの最初の行に位置し、 残りの部分は上に配置されています。画像の右側には 大きな空白ができています。この空白をテキストで 埋めるようにしてみましょう。 そのためには、画像にfloatプロパティを設定し、 値をleftとします：

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

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

Результат:

これで、画像は左にフロートし、テキストはそれに応じて 右側を回り込みます。これにより、画像の横の空白は なくなりました。

画像を左ではなく右にフロートさせることもできます。 そのためには、floatの値をrightに 設定します：

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

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

Результат: