とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. フロート

フロート

.float-{left|right|none} や .float-{breakpoint}-{left|right|none} は、CSS の float を使用してテキストの回り込みを制御します。回り込みを解除するには クリアフィックス (.clearfix) を用います。

This is a message. aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa

This is a message. aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa

This is a message. aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa

<div class="clearfix mb-2">
  <div class="float-left"><img src="..." alt="Image"></div>
  This is a message...
</div>
<div class="clearfix mb-2">
  <div class="float-right"><img src="..." alt="Image"></div>
  This is a message...
</div>
<div class="clearfix">
  <div class="float-none"><img src="..." alt="Image"></div>
  This is a message...
</div>