clearfix

Clearfix-Bootstrap 5和Material Design 2.0

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


基本例子

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

Use in 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">
              Example Button floated left
            </button>
            <button type="button" class="btn btn-secondary float-end">
              Example Button floated right
            </button>
          </div>