clearfix

Clearfix-Bootstrap 5和Material Design 2.0

通过添加clearfix实用程序，可以快速轻松地清除容器中的浮动内容。

基本例子

通过添加 .clearfix 轻松清除 float 到父元素。也可以用作mixin。

Use in HTML:

html


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

mixin源代码：

scss


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

在SCSS中使用mixin：

scss

 .element { @include clearfix; }

以下示例显示了如何使用clearfix。没有clearfix的包装 div不会绕过按钮，这会导致布局损坏。

HTML


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