Floatユーティリティ（回り込み）

『Bootstrap』の Float ユーティリティは、float-start・float-end・float-none などのクラスを付けるだけで要素の回り込みを制御できる機能です。画像の左右への配置やテキストの回り込みを CSS を別途記述せずに実現でき、レスポンシブ対応のブレークポイント付きクラスも用意されているため、画面幅に応じた柔軟なレイアウト調整が可能です。

構文

<!-- 基本構文: float-{方向} -->

<!-- float-start: 要素を左に回り込ませます（float: left） -->
<img class="float-start me-3" src="image.jpg" alt="サンプル画像">
<p>テキストが画像の右側に回り込みます。</p>

<!-- float-end: 要素を右に回り込ませます（float: right） -->
<img class="float-end ms-3" src="image.jpg" alt="サンプル画像">
<p>テキストが画像の左側に回り込みます。</p>

<!-- float-none: 回り込みを解除します（float: none） -->
<img class="float-none" src="image.jpg" alt="サンプル画像">
<p>回り込みなしの通常の配置です。</p>

<!-- clearfix: 回り込みによる親要素の高さ崩れを防ぎます -->
<div class="clearfix">
  <img class="float-start me-3" src="image.jpg" alt="サンプル画像">
  <p>テキストが画像に回り込みます。clearfix で親要素の高さが正しく確保されます。</p>
</div>

Float クラス一覧

クラス	CSS の値	説明
`float-start`	`float: left`	要素を左寄せにし、後続のコンテンツが右側に回り込みます。
`float-end`	`float: right`	要素を右寄せにし、後続のコンテンツが左側に回り込みます。
`float-none`	`float: none`	回り込みを解除します。レスポンシブで一時的に回り込みをリセットする際に使います。
`clearfix`	（擬似要素で clearfix）	親要素に付けると、float した子要素による高さの崩れを防ぎます。

レスポンシブ対応

ブレークポイントを挟むことで、画面サイズに応じて回り込みを切り替えることができます。書式は float-{ブレークポイント}-{方向} です。

<!-- スマートフォンでは回り込みなし、md（768px）以上で左回り込みにします -->
<div class="clearfix">
  <img class="float-none float-md-start me-3" src="image.jpg" alt="サンプル画像">
  <p>PC・タブレットでは画像の右にテキストが回り込みます。</p>
</div>

<!-- lg（992px）以上でのみ右回り込みにします -->
<div class="clearfix">
  <img class="float-lg-end ms-3" src="image.jpg" alt="サンプル画像">
  <p>大画面では画像が右に寄り、テキストが左側に配置されます。</p>
</div>

ブレークポイント	幅の目安	クラス例
（なし）	全サイズ共通	`float-start`
`sm`	576px 以上	`float-sm-end`
`md`	768px 以上	`float-md-start`
`lg`	992px 以上	`float-lg-none`
`xl`	1200px 以上	`float-xl-end`
`xxl`	1400px 以上	`float-xxl-start`

サンプルコード

画像をテキストに回り込ませる基本的な例です。clearfix を親要素に付けて高さ崩れを防いでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float サンプル</title>
  <!-- Bootstrap の CSS を読み込みます -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">

  <h2>左回り込み（float-start）</h2>

  <!-- clearfix: 親要素に付けると float による高さ崩れを防ぎます -->
  <div class="clearfix mb-4">
    <!-- float-start me-3: 画像を左に寄せ、右側にマージンを設けます -->
    <img class="float-start me-3 rounded"
         src="https://placehold.jp/150x150.png"
         alt="サンプル画像" width="150" height="150">
    <p>
      画像の右側にテキストが回り込みます。float-start は CSS の float: left に相当します。
      Bootstrap では左右の方向を論理プロパティで表現するため、RTL（右から左）の言語にも対応しています。
      テキストが長い場合は自然に画像の下まで流れます。
    </p>
  </div>

  <h2>右回り込み（float-end）</h2>

  <div class="clearfix mb-4">
    <!-- float-end ms-3: 画像を右に寄せ、左側にマージンを設けます -->
    <img class="float-end ms-3 rounded"
         src="https://placehold.jp/150x150.png"
         alt="サンプル画像" width="150" height="150">
    <p>
      画像の左側にテキストが回り込みます。float-end は CSS の float: right に相当します。
      新聞や雑誌のレイアウトのように、画像を右端に配置したい場合に便利です。
    </p>
  </div>

</div>

</body>
</html>

スマートフォンでは縦並び、PC では画像を左に回り込ませるレスポンシブなレイアウトの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Float レスポンシブ サンプル</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">

  <h1>お知らせ</h1>

  <!-- clearfix: float 子要素を内包するため、親要素に必ず付けます -->
  <div class="clearfix">

    <!-- float-none float-md-start: スマートフォンでは回り込みなし、
         md（768px）以上では左回り込みになります -->
    <img class="float-none float-md-start me-md-3 mb-3 rounded"
         src="https://placehold.jp/200x150.png"
         alt="お知らせ画像" width="200" height="150">

    <p>
      スマートフォンでは画像とテキストが縦に並び、タブレット・PC では
      画像の右にテキストが回り込むレイアウトになります。
      float-none と float-md-start を組み合わせることで、
      画面幅に応じたレイアウト切り替えを実現しています。
    </p>
    <p>
      float ユーティリティは主に画像とテキストの組み合わせや、
      サイドバーのような補助的なレイアウトに適しています。
      複雑なグリッドレイアウトには Flexbox や Grid の利用をご検討ください。
    </p>

  </div>

</div>

</body>
</html>

概要

Float ユーティリティは『Bootstrap』が提供する要素の回り込みを制御するクラス群です。float-start（左）・float-end（右）・float-none（解除）の3種類があり、CSS の float プロパティを直接記述せずにクラスだけで回り込みを設定できます。

float-start と float-end は左右を示す left / right ではなく論理プロパティ名（start / end）を採用しているため、RTL（右から左に読む）言語のページにもそのまま対応できます。

float を使う際は、回り込みによって親要素の高さが正しく確保されない「高さ崩れ」に注意が必要です。親要素に clearfix クラスを付けることで、擬似要素を使ったクリアフィックスが自動的に適用され、高さ崩れを防ぐことができます。

レスポンシブ対応として float-{ブレークポイント}-{方向} 形式のクラスも利用できます。例えば float-none float-md-start とすると、スマートフォンでは回り込みなし・md（768px）以上では左回り込みという切り替えをクラスだけで実現できます。

なお、複雑な2カラムレイアウトや横並びのグリッドには Flexbox や Grid の利用が適しています。Float ユーティリティは画像へのテキスト回り込みや補助的な配置に活用してください。

関連ページ: Flexbox / Display / Margin / Padding

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

Bootstrap辞典

Floatユーティリティ（回り込み）

構文

Float クラス一覧

レスポンシブ対応

サンプルコード

概要