CSS清浮动处理（Clear与BFC）

在CSS布局中float属性后会使其在普通流中脱离父容器，以下连提供解决办法：

1.clear清除浮动

WechatIMG187.jpeg

1.clear清除浮动

• 第一种办法：结束地方加一个空元素

• 第二种办法：用为元素 after
  效果图：

  
  
  WechatIMG188.jpeg

2.使父容器形成BFC

• float为 left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|table-caption|inline-block
• position为 absolute|fixed
  我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

 
 

    
    
    
    
    


    

        
        

            
1
            
2
            
3
        
    
    

        
        

            
            
            
        
    

WechatIMG189.jpeg

• 我们可以看到父容器高度没有塌陷，但是长度变短了，因为div应用float‘后会根据内容来改变长度，这个在很多时候很有用，但是我们不希望有这种效果怎么办？
• 在IE6、7使用hasLayout

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:"";
    display:table;
    clear:both;
}

效果图：

WechatIMG190.jpeg

转载：https://www.cnblogs.com/dolphinX/p/3508869.html