布尔玛 Clearfix

在本文中，我们将了解Bulma Clearfix 。它是一个使用clear: both规则添加::after伪元素的 mixin。使用这个 mixin 会导致浮动元素之后的元素在它周围流动。

Bulma 没有提供用于创建重置按钮 mixin 的特定类。我们需要创建自己的类并使用 SASS mixins 对其进行样式设置。

句法：

.bulma-clearfix-mixin {
    @include clearfix;
}

示例 1：以下示例说明了 Bulma Clearfix mixin。

HTML



  

    
    
    

  

    
        
          GeekforGeeks
        
        Bulma Clearfix Mixin
    
  
    
        
            
             
              Welcome to GeeksforGeeks.
            
        
        Learn Programming, Participate in Contests,
           apply for jobs, find video tutorials, and more.

CSS

@mixin clearfix() {
    clear: both;
    content: " ";
    display: table;
}
  
.bulma-clearfix-mixin {
    @include clearfix();
}

HTML



  

    
    
    

  

    
        
          GeekforGeeks
        
        Bulma Clearfix Mixin
    
  
    
        
            
            
              GeeksforGeeks
            
            Learn Programming, Participate in Contests,
               apply for jobs, find video tutorials, and more.

CSS

@mixin clearfix() {
    clear: both;
    content: " ";
    display: table;
}
  
.bulma-clearfix-mixin {
    @include clearfix();
}

输出：

布尔玛 Clearfix

示例 2：另一个示例说明了右对齐的 Bulma Clearfix mixin。

HTML



  

    
    
    

  

    
        
          GeekforGeeks
        
        Bulma Clearfix Mixin
    
  
    
        
            
            
              GeeksforGeeks
            
            Learn Programming, Participate in Contests,
               apply for jobs, find video tutorials, and more.

CSS

@mixin clearfix() {
    clear: both;
    content: " ";
    display: table;
}
  
.bulma-clearfix-mixin {
    @include clearfix();
}

输出：

布尔玛 Clearfix

参考： https ://bulma.io/documentation/utilities/mixins/#clearfix