floatはFlexboxと無関係（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 24日目）

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

基本的な使い方

.theAsideBlock {
  float: right;
}

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

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

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

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

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

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

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

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

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

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