float-right

bootstrap5.css

.float-right {
  float: right !important;
}

html bootstrap5 Sample

インラインでフロートを設定する：float-left

float-left float-right float-none

  <!-- spanだからinlineで、文字数分だけ表示される、それをフロート -->
  <!-- 重ならない、前の要素の後に、順番が適用されていく -->
  <span class="float-left">float-left</span>
  <span class="float-right">float-right</span>
  <span class="float-none">float-none</span>

インライン改行でフロートを設定する：float-left

float-left
float-right
float-none

  <!-- 改行brを入れると、その行でフロートが効く -->
  <span class="float-left">float-left</span><br>
  <span class="float-right">float-right</span><br>
  <span class="float-none">float-none</span>

フロートを解除する：clearfix

右フロート

  <!-- afterでフロート解除が行われるので、フロートではないコンテンツが回り込まずに別ブロックに表示される -->
  <!-- 重なっていない浮いているから背景色出る -->
  <!-- 幅50でmx-autoで赤色を指定している -->
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-right bg-success">右フロート</div>
  </div>

フロートを解除しない（重なっているので背景色がでない）

右フロート

  <div class="w-50 mx-auto bg-danger">
    <div class="float-right bg-success">右フロート</div>
  </div>

Float(画像と文字)：float-left

文字が重ならない、画像と同じ位置からスタート

画像の位置から改行されて、文字がスタート

  <div class="clearfix mb-2">
    <div class="float-left"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    文字が重ならない、画像と同じ位置からスタート
  </div>
  <div class="clearfix mb-2">
    <div class="float-right"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    文字が重ならない、画像と同じ位置からスタート
  </div>
  <div class="clearfix">
    <div class="float-none"><img src="https://via.placeholder.com/100x100" alt="Image"></div>
    画像の位置から改行されて、文字がスタート
  </div>

Float（画像同士）左と右：float-leftとfloat-right

  <!-- divでclearfixなので、/div後はfloatを引きずらない -->
  <div class="clearfix">
    <img src="https://via.placeholder.com/200x200" class="float-left" alt="左寄せ画像">
    <img src="https://via.placeholder.com/200x200" class="float-right" alt="右寄せ画像">
  </div>