Bootstrap中的Clearfix

HTML结构的主要问题之一是，如果在父div内有子div，则子div会自动在父div周围流动。解决此问题的方法是使用CSS的clear属性。

Bootstrap允许我们使用一个名为clearfix的类，该类用于清除任何容器中的浮动内容。

示例1：不带clearfix属性。在下面的程序中，两个按钮左右浮动。

    Bootstrap Example
    
    
    
    
    
      
    
    .left{
        float:left;
    }
      
    .right{
        float:right;
    }
    

  

    
        
            floated left button
        
                
        
            floated right button
        
    

输出：

Clearfix属性清除该元素所应用于的所有浮动内容。它还用于清除容器中的浮动内容。

示例2：具有clearfix属性。如果不使用clearfix类，则父div可能无法正确环绕子按钮元素，并可能导致布局损坏。

    Bootstrap Example
    
    
    
    
    
      
    
    .left{
        float:left;
    }
      
    .right{
        float:right;
    }
    

  

    
        
            floated left button
        
                
        
            floated right button
        
    

输出：