CSS基礎の基礎 floatがなんだかんだ使いやすい件

古いIEの勢力がやっと減ってきて、ようやくコーディングも楽になってきた今日この頃。
要素を横並びにするのにモダンブラウザが中心のこのご時世、『Flexbox』で大体解決出来るでしょ。そう思ってなんでもかんでも『Flexbox』でコーディングしてた時期がありました。

すごく楽チンなんだけども、IE10,IE11で予想外の動きをすることがちょくちょくある。
高さを取得出来ず、要素がはみ出したり、よくわからない理由でレイアウトが崩れたり。

IEがこの世から消え去れば『Flexbox』一択でいいと思うけど、まだIE11とかは対応してって案件も多い。
Chromeベースでコーディングしてクロスブラウザチェックしたら、崩れてて原因解明に時間を持っていかれる。
そう考えるとなんだかんだ『float』で組むのが一番安心だったりする。

CSSの基礎の基礎だけど、おさらいも兼ねて『float』の使えるコードをコピペ出来るようにいくつか載せておきます。

二つの要素を横並びに

See the Pen MoLJga by OKD (@OKD) on CodePen.

三つの要素を横並びに

See the Pen weNgMb by OKD (@OKD) on CodePen.

四つの要素を横並びに

See the Pen ZywLBp by OKD (@OKD) on CodePen.

要素次第で見た目はだいぶ変わるけども急いでモックを作らなきゃいけないなんて時にでも使ってくださいませ。