Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
構文・カスケード Widely available

float and clear

テキストの回り込みを実現するための古典的なCSSレイアウト手法です。画像の横にテキストを流し込むなど、印刷メディアに由来するレイアウトパターンに使用します。かつてはページレイアウト全体に使用されましたが、現在ではFlexboxやGridの方が推奨されます。テキスト回り込みはfloatの最も適切な用途です。

フロートテキスト回り込み

概要

テキストの回り込みを実現するための古典的なCSSレイアウト手法です。画像の横にテキストを流し込むなど、印刷メディアに由来するレイアウトパターンに使用します。かつてはページレイアウト全体に使用されましたが、現在ではFlexboxやGridの方が推奨されます。テキスト回り込みはfloatの最も適切な用途です。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
.float-image {
  float: left;
  margin: 0 1em 1em 0;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

実務での使いどころ

  • 画像のテキスト回り込み

    記事内の画像をfloatで配置し、テキストが画像の周囲を自然に流れるレイアウトを実現します。

注意点

  • フロート要素は親要素の高さ計算から外れるため、clearfixハックまたはdisplay: flow-rootで親の高さを確保してください。

アクセシビリティ

  • floatによるレイアウトは視覚的な順序とDOMの順序が一致しない場合があるため、スクリーンリーダーの読み上げ順序に注意してください。

参考リンク