clearfix

bootstrap5.css

bootstrap5.css
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

html bootstrap5 Sample

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


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