css学习笔记之浮动清除

1.BFC

说到浮动，不得不说一下BFC（Block Formatting Context),翻译为“块级格式化上下文”。关于BFC的原理，我参考了此篇文章，BFC参考资料，大家有需要可以去看看。

2.清除浮动的方法

2-1.为父元素增加高度height。

 
 

    

        

                清除浮动-子层
        
    
    
底部

这种方法虽直接让底部的div挤到下方，并没有真正的清除浮动，但可以达到清除浮动的效果。

2-2.为父元素设置浮动

 

    

        

                清除浮动-子层
        
    

虽能清除浮动，但也让为父元素增加了浮动，可能会带来其他效果。

2-3.设置display

通过设置display为inline-block或者table或者table-cell或者 table-caption，可以清除浮动

但display：inline-block、display：table-cell和display： table-caption都会使margin: 0 auto;失效，达不到想要的块居中效果；display:table;不存在上述现象。

 


    

        

                清除浮动-子层
        
    

2-4.使用:after

    


        

                清除浮动-子层
        

    

此方法比较优雅。

2-5.其他

a.为父div设置overflow:hidden或者overflow: auto；

    


        

                清除浮动-子层
        

    

b.在父div里加空div

    


        

                清除浮动-子层
        
	

    

c.为父div设置position:fixed;absolute同样可以清除浮动

    


        

                清除浮动-子层
        

    

最终，清除浮动还是围绕着触发BFC的条件在变。