フロートを用いたレイアウト手法はしばらくレイアウトに活用されてきたが、これは厳密にはフロート本来の使い方とは異なる。フロートは文字通り「浮いた」要素を表現するもので、画像の周辺に文字を回り込ませるような場合に使うものである。これがたまたまレイアウトに使えるということで、広く使われるようになった。しかし本来の使い方ではないために clearfix などのトリッキーな技法も必要であった。

かつて table が、本来の「表を表現するもの」という役割を超えて、レイアウトに活用された時期があったのと似ている。

2 カラムや 3 カラムのレイアウトや、SNS 記事表示、写真表示などの縦横に配置されるグリッドレイアウトが多用されるようになり、CSS3 からはこれらのレイアウトを表現する目的を直接担った(なにかの代用ではない)専門の手法が導入されている。これらはまさに(2020年現在で)「いま」生まれつつあるもので、毎年のように新しいものが出てくる。

代表的なものに CSS Flexbox と CSS Grid Layout がある。これらにより HTML, CSS ともに簡素な記述でグリッドレイアウトなどが実現できるようになった。しかしレイアウトは本来多くの自由度を持ち、指定すべき要素も多いため、複雑さはそれらの手法の中に残る。

ここではとりいそぎ、参考サイトを挙げるに留める。

CSS Flexbox の解説 : 例えば https://webdesign-trends.net/entry/8148 など

CSS Grid Layout の解説 : 例えば https://qiita.com/kura07/items/e633b35e33e43240d363, https://ics.media/entry/15649/ など

フロートはオワコンか？ : 興味深い記事 : https://zarigani-design-office.com/blog/is_float_owacon/

これからのレイアウトは Grid Layout で決まり？ : 興味深い記事 : https://ics.media/entry/15921/