清除浮动（Clearfix）

透过增加clearfix通用类别，可以快速轻松地清除容器中的浮动内容。

On this page

透过将.clearfix添加到父元素之中可以轻松的清除float。也可以当作mixin来使用.

在HTML使用：

<div class="clearfix">...</div>

mixin 源代码：

@mixin clearfix() {
        &::after {
        display: block;
        clear: both;
        content: "";
        }
        }

在mixin中搭配SCSS:

.element {
        @include clearfix;
        }

以下示例显示如何使用clearfix。如果没有使用clearfix，则包装按钮的div将不会展开来，这会导致布局跑版。

<div class="bg-info clearfix">
        <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
        <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
        </div>