インラインでフロートを設定する:float-start


float-start float-end float-none

  <!-- spanだからインラインでフロートする、文字数分だけ表示される -->
  <!-- 重ならない、float-noneはfloatしないとのと同じ状態 -->
  <span class="float-start">float-start</span>
  <span class="float-end">float-end</span>
  <span class="float-none">float-none</span>

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


float-start
float-end
float-none テキスト

  <!-- 改行brを入れると、その行単位でフロートが効く -->
  <!-- float-noneはfloatしないとのと同じ状態 -->
  <span class="float-start">float-start</span><br>
  <span class="float-end">float-end</span><br>
  <span class="float-none">float-none</span>
  <span>テキスト</span>

ブレイクポイントでフロートを切り替える:float-sm-end


SM(small)以上で左寄せ
MD (medium)以上で左寄せ
LG (large)以上で左寄せ
XL (extra-large)以上で左寄せ

  <span class="float-sm-end">SM(small)以上で左寄せ</span><br>
  <span class="float-md-end">MD (medium)以上で左寄せ</span><br>
  <span class="float-lg-end">LG (large)以上で左寄せ</span><br>
  <span class="float-xl-end">XL (extra-large)以上で左寄せ</span>

フロートを解除する(親要素範囲内でfloatを使う):clearfix


右フロート

  <!-- 親にclearfixすることで、その中だけでfloatを使うことで、他のレイアウト崩れを回避するために使う -->
  <!-- 重なっていない浮いているから背景色出る -->
  <!-- 幅50でmx-autoで赤色を指定している -->
  <div class="w-50 mx-auto bg-danger clearfix">
    <div class="float-end bg-success">右フロート</div>
  </div>

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


右フロート

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

Float(画像と文字):float-startとfloat-none


Image
文字が重ならない、画像と同じ位置からスタート
Image
文字が重ならない、画像と同じ位置からスタート
Image
画像の位置から改行されて、文字がスタート

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

Float(画像同士)左と右:float-startとfloat-end


左寄せ画像 右寄せ画像 テキストは、div内の空いているスペースに表示される

  <!-- divでclearfixなので、/div後はfloatを引きずらない -->
  <div class="clearfix">
    <img src="https://via.placeholder.com/200x200" class="float-start" alt="左寄せ画像">
    <img src="https://via.placeholder.com/200x200" class="float-end" alt="右寄せ画像">
    テキストは、div内の空いているスペースに表示される
  </div>

Float左と右:float-startとfloat-end



  <!-- bootstrap5は、leftとrightではなく、startとendになる -->
  <div class="bg-info clearfix">
    <button type="button" class="btn btn-secondary float-start">左フロート</button>
    <button type="button" class="btn btn-secondary float-end">右フロート</button>
  </div>