45.今一度、floatについて　～改めて動きを確認する～

フレックスボックスを使うようになって、あまりfloatにお世話になる機会が減りました。

ただ、positionプロパティを指定したり、floatプロパティを指定した時の要素の挙動について、よくわかってないなと感じることがありました。

ですので、今一度確認しておこうと考えた次第です。

ということで、早速やっていきましょう。

ブロック要素を横並びに配置したい時に使うCSSのプロパティです。

ブロック要素は

という性質がありましたね。

この最後の「同じ親を持つ他の子要素とは縦に並ぶ」という性質の為、

ブロック要素同士は横に並ぶことはできないのです。

それを解決する手段の１つとしてfloatを使うわけです。

floatを指定すると、「浮く」とよく表現されます。

それは別のブロック要素がフロートした要素の下に入り込むことからも

おわかりいただけると思います。

そして、同様のfloatを設定した要素とは隣合せで並びます。

ここがポイントで「同じ親を持つ他の子要素とは縦に並ぶ」はずの

ブロック要素を横並びにできるわけです。

良くレイアウト崩れや親要素の高さが無くなることで話題に上がるfloatプロパティ。

今回改めて確認していて気づいたことがいくつかあります。

floatを指定すると、ブロック要素の「横幅の初期値は親要素の横幅と同じになる」がなくなり、フロート要素の幅はwidth指定がない場合、中身にフィットする。（インラインぽいですね）
フロート要素の下に別のブロック要素が回り込むのは幅(width)の指定が無い要素。幅指定があるブロック要素はフロート要素の下に位置する。
２の回り込むブロック要素はは通常のブロック要素の性質を持っているが、中身（テキスト）の開始位置が、親要素の左端からフロート要素の終わり位置になる。ただしブロック要素の位置に変化はない。
3の時に親要素から中身がはみ出す場合は改行され、フロート要素の下に移動される。height指定がない場合は高さが自動で確保される。
4の時、高さ指定があり、フロート要素よりもブロック要素のheightが小さい場合に、改行した位置に中身だけが配置され、次のブロック要素と重なる。

特にheight関連の挙動は全然しりませんでした。

floatに関しては色々と仕様が定まりきっていないという情報もちらほら。

今回は実際にレイアウト崩れの状態を作って確認しながらテストしました。

意味があるかと言われれば微妙ですが、

気になって試したかったので仕方がない（笑

無理やりこじつけるなら、

実務でfloat関連で修正が必要な場面で対応がしやすいかなと思いました。