float-none

bootstrap5.css

bootstrap5.css
.float-none {
  float: none !important;
}

html bootstrap5 Sample

インラインでフロートを設定する: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(画像と文字):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>