清除浮动
通过添加 clearfix 工具类,可以快速轻松地清除容器中浮动的内容。
为父级元素 添加 .clearfix
类可以很容易地清除内部的浮动。还可以作为 mixin 使用。
在 HTML 中的使用方式如下:
<div class="clearfix">...</div>
引用该 mixin 的源码:
@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">向左浮动(float)的示例按钮</button> <button type="button" class="btn btn-secondary float-end">向右浮动(float)的示例按钮</button> </div>