View on GitHub
Clearfix清除浮动
Quickly and easily clear floated content within a container by adding a clearfix utility.通过添加clearfix实用程序，可以快速轻松地清除容器中的浮动内容。
Easily clear 通过对父元素添加floats by adding .clearfix to the parent element. .clearfix来轻松清除浮动。Can also be used as a mixin.也可用作mixin。
Use in HTML:在HTML中使用：
<div class="clearfix">...</div>
The mixin source code:mixin源代码：
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
Use the mixin in SCSS:在SCSS中使用mixin：
.element {
@include clearfix;
}
The following example shows how the clearfix can be used. 下面的示例显示了如何使用清除浮动。Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.如果没有清除浮动，包装<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>