清除浮动

通过添加clearfix实用工具，快速且容易地清除容器内的浮动内容。

通过在父元素中添加 .clearfix ，可以轻松清除 float。也可以用作混入。

在HTML中使用:

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

混入源代码

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

在SCSS中使用mixin:

.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>