CSSのfloatはその名の通り、要素を浮かせて配置するプロパティです。
要素を浮かせることで横並びの配置が簡単にできちゃいます！
さっそく使い方を見ていきましょう！
floatの使い方
今回はこちらのhtml・cssに対してfloatを適用していきます。
何も指定しない状態では赤色と黄色と緑色の３つの要素が、親要素の灰色の要素に対して縦に並んでいます。
See the Pen float sample 1 by Usagi (@naniwa_usagi) on CodePen.
float:left を適用する
赤色と黄色と緑色の３つの要素に対してfloat: leftを適用させた結果がこちらです。
縦に並んでいた要素が横並びに配置されました。
See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.
float:right を適用する
先ほどの例のようにfloat: leftを適用すると親要素である灰色の要素の左側にくっつくように配置されました。
これと同様にfloat: rightを適用すると右側にくっつくように配置されます。
たとえば赤色と黄色の要素にfloat: leftを、緑色の要素にfloat: rightを適用させると、緑色の要素が右端にくっつくように配置されました。
See the Pen float sample 3 by Usagi (@naniwa_usagi) on CodePen.
float が横並びになるイメージ
どうしてfloatプロパティを指定すると横並びになるのでしょうか？
個人的には部屋に風船を浮かせたイメージを持っています。
部屋という親要素に対して風船という子要素を浮かせると天井にくっついて並びますよね。
floatという言葉通り、要素の底に浮かせるようなことはできない点も覚えておくといいでしょう。
floatの注意点
floatは要素の横並びを簡単に実現できますが、注意点があります。
赤色の要素だけにfloat: leftを適用した結果を見てみましょう。
See the Pen float sample 4 by Usagi (@naniwa_usagi) on CodePen.
floatは要素を浮かせるプロパティなので、後続の要素にfloatが適用されていない場合は後続の要素の上に重なって表示されます。
例だと黄色の要素の上に赤色の要素が重なっていることが分かるとおもいます。
これを回避するためにfloatを適用しない要素にclearプロパティを適用しましょう。
clearプロパティは後続の１要素だけで大丈夫ですので、黄色の要素にclear: leftを適用します。
See the Pen float sample 5 by Usagi (@naniwa_usagi) on CodePen.
１つの要素にclearプロパティとfloatプロパティの両方を適用することもできます。
floatした赤色の要素の下に黄色と緑色の要素を横並びに浮かせて配置する場合は、
黄色の要素にfloat: leftとclear: leftを適用しましょう。
See the Pen float sample 6 by Usagi (@naniwa_usagi) on CodePen.
まとめ
Webサイト制作をするうえでfloatプロパティはよく使いますので、是非使い方を覚えてみてください！
