CSS

CSSのfloatとは？使い方を解説

この記事では、floatプロパティの基本的な使い方と注意点について解説します。

floatプロパティとは？

floatプロパティは、要素を左または右に寄せるために使用されるCSSプロパティです。

主に画像のテキストの周りに文字を回り込ませるために利用されます。
floatを適用した要素は、親要素の流れから取り出され、他のコンテンツがその周りに回り込むように配置されます。

floatプロパティの基本的な使い方

floatプロパティは、要素を左右に移動させるために使用されます。

floatプロパティの値としては、次の3つがあります。

  1. left: 要素を左側に浮動させます。
  2. right: 要素を右側に浮動させます。
  3. none: 要素を浮動させません（デフォルトの値）。

例えば、以下のCSSコードは、画像を左側に浮動させる例です。

img {
  float: left;
}

この場合、img要素は左側に浮動され、その周りにテキストや他の要素が回り込むように配置されます。

なお、floatプロパティを適用する要素は、通常はブロックレベル要素（<div>や<p>など）やインラインブロック要素（<span>など）です。通常、テキストや画像を浮動させるために使用されます。

floatプロパティの利用例として、画像の配置や複数の要素を水平に並べるためのナビゲーションメニューの作成などがあります。

 

floatプロパティの注意点

floatプロパティを使用する際には、いくつかの注意点を理解しておく必要があります。

  1. 親要素の高さが崩れる: floatを適用すると、要素が親要素から浮上します。そのため、親要素の高さが消失し、レイアウトが崩れることがあります。この場合は、親要素にclearfixクラスなどを追加することで問題を解消できます。
  2. テキストの回り込み: floatを適用した要素の周りにテキストが回り込むことになります。これが意図した挙動でない場合は、適用した要素の次の要素にclear: both;を適用してください。
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

 

まとめ

floatプロパティは、要素を左または右に寄せるための重要なCSSプロパティです。

ただし、親要素の高さの崩れやテキストの回り込みに注意しながら使用する必要があります。適用する要素の次の要素にclear: both;を使うことで、意図しないレイアウト崩れを回避することができます。

これらのポイントを理解して、floatプロパティを上手に活用しましょう！

-CSS