float

フロート（レイアウトとボックスモデル）

意味要素を浮かせて配置

floatとは？

floatプロパティは、要素を左または右に浮かせて、テキストやインライン要素が周囲を流れるように配置するために使用します。

floatの具体的な使い方

画像を左に浮かせる例

<style>
  img {
    float: left;
    margin-right: 20px;
    background-color: tomato;
  }
</style>

<img src='https://picsum.photos/200/100'>
この画像は左側に浮かべられ、右側に20ピクセルの余白があります。

画像要素を左側に浮かせ、右側に20ピクセルの余白を設けています。

要素を右に浮かせてテキストを回り込ませる例

<style>
    .float-right {
        float: right;
        margin-left: 20px;
    }
</style>

<div class='float-right'>
    右に浮かぶ要素
</div>

<p>
    この段落のテキストは浮かぶ要素の左側に回り込みます。
</p>

要素を右側に浮かせ、テキストが左側に回り込むようにしています。

floatに関するよくある質問

Q. floatとは何ですか？

A. floatは要素を左右に浮かせ、他の要素がその周りを回り込むようにするCSSプロパティです。主にレイアウトの調整に使用されます。

Q. floatの値には何がありますか？

A. floatの主な値には、left（左寄せ）、right（右寄せ）、none（浮動解除）があります。

Q. floatの問題点は何ですか？

A. floatを使用すると、親要素の高さが正しく計算されない「親要素の高さ崩れ」という問題が発生することがあります。これはclearfixなどの技術で解決できます。

floatが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのfloatやmargin-top、min-width、border-width、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。