Clearfix

親要素に clearfix 属性を追加することで、簡単に float をクリアできます。 mixin としても使えます。

Use in HTML:

 <b-div clearfix> ... </b-div>

次の例は、clearfix の使い方を示しています。clearfix を使用しないと、ラッピング div がボタンの周りに配置されず、レイアウトが崩れてしまいます。

vue

<template>
 <b-div
  clearfix
  background-color="info"
 >
  <b-button
   color="secondary"
   float="start"
  >
   Example Button floated left
  </b-button>
  <b-button
   color="secondary"
   float="end"
  >
   Example Button floated right
  </b-button>
 </b-div>
</template>

Bootstrap

Clearfix