フレキシブルボックスモデルを使うと悩みが解消するかもしれない

こんにちはmiyaです。
研修6日目、残すところあと4日！早い早い！！

floatを使った段組み

皆さん、段組み設定を表現するときfloatを使ってますか？
私も業務で使ってましたし、職業訓練でも習いました。

floatを使った際、ちゃんと解除してあげないとレイアウトが崩れます。
その解除方法も3通り存在します。

clear:bothを使う

これはfloatさせたすぐ後のdivなどにclear:bothとしているする方法です。
floatにはleftとrightがあるので両方を意味するbothでfloatを解除するんですね。

See the Pen float-sample by futappa201702intern (@ftit201702) on CodePen.dark

このときの問題は、親要素の高さがなくなってしまう事！

clearfixを使う

floatさせたいdivなどを囲む親要素の疑似要素である:beforeや:afterでfloatを解除する方法です。
疑似要素である:beforeや:afterで見えない板を作って下に続くコンテンツを潜り込ませないようにする手法です。

See the Pen float-sample-cf by futappa201702intern (@ftit201702) on CodePen.dark

この場合、親要素の高さは維持できています。
が、ちょっと記述が長いのが面倒…
(これでも短くなったのですが)

overflow:hiddenを使う

疑似要素を使わず、floatさせたいものを囲む親要素にoverflow:hiddenを書くだけ！
一番簡単な方法ですね。

See the Pen float-sample-overflow by futappa201702intern (@ftit201702) on CodePen.dark

もっと楽になるかもしれないdisplay:flexを使う！

CSS3からはレスポンシブの事も考え、フレキシブルにできるdisplay:flexが使えます！
かなり柔軟にできるのでオススメですよ！

横並び

See the Pen flex-sample by futappa201702intern (@ftit201702) on CodePen.dark

縦並び

See the Pen flex-sample-col by futappa201702intern (@ftit201702) on CodePen.dark

簡単に横並びから縦並びに変えることが可能！
そして今回のサンプルではしていませんが、並び替えだってCSSだけできます！

---

CSSの書き方で色々迷っていましたが、今は書き方が確立しているので活用できるのではないでしょうか！
モダンブラウザであれば対応してますし。floatの解除が面倒で避けてきた私にはとっても嬉しい機能です！