floatレイアウトの問題点と現在の用途
floatプロパティは本来「回り込み」を実現するためのものであって、複雑な段組みレイアウトのために作られたものではなかったため、
- 横並びにしたブロックの高さを揃えられない
- 横並びにしたブロックは上揃えにしかならない
- 少しでも幅の計算を間違えるとすぐにカラム落ちする
- float解除の仕組みが分かりづらい
というデメリットがある。
現在はflexboxレイアウト・gridレイアウトといった新しいレイアウト手法が主流だが、唯一本来の役割である「テキストの回り込み」をさせたい場合はfloatプロパティでなければ実現ができないので、floatを使うことになる。
flexboxの特徴と主な用途
flexboxレイアウトの特徴は一方向の軸に沿ってアイテムを並べる「一次元のレイアウト」である。1行だけの横並びはもちろんのこと、折り返して複数行で横並びにする際も、常に決められた軸の方向に沿って1列にアイテムが並ぶ特徴があるため、要素の追加・削除などの変更に強く、成り行きでコンテンツを配置することの多いCMS環境での実装とも非常に相性が良いのが特徴である。
gridの特徴と主な用途
gridレイアウトはあらかじめ決められた枠の中にアイテムを入れていくようなレイアウトで最も威力を発揮します。gridレイアウトではdisplay:gridでgridレイアウトを利用するためのコンテナを指定した後、縦横のグリッド線で仕切られたエリア枠を設定し、その中に必要なコンテンツを配置する「二次元のレイアウト」である点が大きな特徴である。
gridレイアウトではレイアウトのための枠をCSSだけで設定できるため、従来のレイアウトで必須だった「レイアウトのためだけに必要なdiv枠」が不要となり、とてもシンプルなHTML構造でレイアウトできるようになる。
