とほほのBootstrap 4入門
トップ >
Bootstrap 4入門 >
フロート
フロート
.float-{left|right|none}
や .float-{breakpoint}-{left|right|none}
は、CSS の float を使用してテキストの回り込みを制御します。回り込みを解除するには クリアフィックス (.clearfix
) を用います。
Sample
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
Code
<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>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/float.html