CSS レイアウト – floatプロパティ

CSSのfloatプロパティは、要素がどのように浮動するかを指定します。

floatプロパティ
例 – float: right;
例 – float: left;
例 – float: none;
例 – 複数の要素を隣り合わせに浮動させる

floatプロパティ

floatプロパティは、コンテンツの配置と書式設定に使用されます。例えば、画像をテキストの左側または右側に浮動させることができます。

floatプロパティには次の値があります：

left – 要素がコンテナの左側に浮動します
right – 要素がコンテナの右側に浮動します
none – 要素が浮動しない（テキスト内の位置に表示されます）。デフォルトの設定です。
inherit – 要素が親要素のfloat値を継承します

floatプロパティの最も単純な使用法は、テキストを画像の周囲にラップすることです。

img {
  float: right;
}

例 – float: right;

以下の例では、テキストの右側に青色の背景を持つdiv要素が浮動します：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac…

img {
  float: right;
}

例 – float: left;

以下の例では、div要素がテキストの左側に浮動するように指定されています：

img {
  float: left;
}

例 – float: none;

以下の例では、div要素がテキスト内の位置に表示され、浮動しません（float: none;）：

img {
  float: none;
}

例 – 複数の要素を隣り合わせに浮動させる

通常、div要素は上下に表示されますが、float: leftを使用することで要素を隣り合わせに浮動させることができます：

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}