最近float使わなくなってきた

コンテンツを横並びにしたい時、かつてはfloat大正義でしたが、最近使わなくなってきた。

Floatのデメリットが目立ってきたのが大きい。

【floatのデメリット】

・毎度解除しなきゃいけない

・解除の方法が多様すぎる。人によってやり方に差がありすぎる。

・vertical-align使えない

・高さが違うと一気に崩れる

最近レスポンシブが増えて、ブラウザ幅で中身が折り返したりするんですよ。

で、予期せぬ高さになって崩れる事が増えたので、並べるコンテンツの高さを合わせたくなりがちに。

もし、背景に色がなくて、次の段の始まりさえ揃っていればいいならinline-blockが一番楽チン。

デモは、今更私が作らなくても先人のえらい人たちがいくらでも作ってくれているのさ！！

ただ、高さを設定したり、縦センターを使いたかったりするならdisplay-table。

ただしmargin使えないため、その他の間隔設定でドン詰まることのないようご注意案件。ブラウザの対応も気にしたいところ。

なーんて書いたけど、やっぱりキレイにまとめてくれてる人がいるわけで(^p^

» 横並びにするためのCSS一覧（float,table,inline,inline-blockなどの違い、メリット・デメリット）｜コワーキングスペース管理人のブログ