知名度が低いウェブ標準ひとり Advent Calendar 2021 – 24 日目

最終日の今日は float です。え、知ってる? でも Flexbox とは無関係ですよ。

基本的な使い方

.theAsideBlock {
  float: right;
}

画像が段落の右側に表示され、文章が回り込んで表示されている様子。

clear で解除

回り込みをやめて浮遊領域の下へ送りたいときは、その送りたい要素に対して clear: both を与えます。

MDN のデモを見てみてください。

Flexbox vs float

初心者向け CSS 情報!みたいな文脈で一昔前まで題材としてしばしば取り上げられてきました。

float の用途は要素の配置を浮遊させるものだったんですが、それを利用してタイル状に要素を並べることもできます。ハックですね。他に手段がないのでしばしば利用されてきました。おれも使ってましたよ。

時は流れ CSS3 とかなんかそういう頃になると、まさにそのタイル状に並べる用の CSS が追加されました。それが display: flex です。名前も Flexbox だったりしましたね最初は。追ってませんがなかなか難しい仕様策定だったようで勧告になるまでずいぶんかかった印象があります。

というわけなので、Flexbox vs float は「文字を大きくするのに <h1> を使うか CSS を使うか」みたいな話です。cHTML、懐かしいですね。

使い道

論文の図を掲示するとか小説の挿絵を置くとかそういうのに良さそうかなと思います。

ただ近年は回り込みよりも普通に段落を改めて表示するレイアウトが主流になっている気がします。しばらく見た記憶がありません。横に置くときも Grid で並べて回り込ませないしなあ。

個人の感想です、統計とかは見てません。今でも使ってるという方はもちろんそのままで構わないですし。

おしまい

最もハックとして使用されている(いた)CSS プロパティランキング(おれ調べ)第 1 位です。次点は transform: translate3d(0) 。

参考