コーディング初心者の関門、つまづきがちなのが「float」まわり。
floatは回り込みができる便利なプロパティですが、CSSを書き始めて大体一番最初につまづくのがここ。どう頑張っても序盤に出会う関門です。
実際の所「なにげなく使ってるけどfloatってなに？」とか、
よくわからないまま使っているせいで、レイアウトが崩れた時に直せない。。とか、発生しがちです。
今回はfloatってなに？という部分からご説明してみたいと思います。
ちなみに、これはすでにバリバリのエンジニアさんは読まないと思うので、駆け出しコーダーさん向けに（？）割とふわっとした表現で書きます。
floatってどんな時に使うの
おもに使用する箇所は、回り込みを行う場合です。
「画像の右側に文字を掲載したい」とかって時に使います。
floatプロパティには下記の3つの値が設定できます。
- float: left; //要素を左側に回り込ませる。後に続く内容はその右側に回り込みます。
- float: right; //要素を右側に回り込ませる後に続く内容はその左側に回り込みます。
- float: none; //回り込みをしない。これは初期値です。
たとえば
このテキストはfloat:leftになっています。
なので、その次の画像が右側に回り込んでいます。
（スマホで見ると横幅の都合上回り込んで見えません）
floatの注意点
floatはその名の通り「浮いている」状態です。
なので、親要素にコンテンツとしての高さが認識されません。
また、floatは「解除」をしてあげる必要があります。「左に回り込むのはここまでで終わり！」と教えてあげるイメージです。
ここの解除方法がなかなかにトリッキーだったりするので、躓いてしまう人が多い印象です。
floatの解除方法は↓の記事を参考にしてみてください★
CSS：floatの解除方法３つ（＋１つ）
うまいこと横並びにならないときにはこちらの記事をご覧ください◎
CSS：floatで要素が横並びにならない時に見る記事
それでは皆様、よいfloatライフを！！
