1   .BFC的含义 ：         

  

                               Block Formatting Contexts（BFC）                                      块级元素格式化上下文

                                它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系

                                块级元素：父级（是一个块元素）

                                内容：子元素（是一个块元素）

                                其他元素：与内容同级别的兄弟元素

                                相互作用：BFC里的元素与外面的元素不会发生影响              

 

                 2.触发条件    ：      

                                  触发BFC的方式（一下任意一条就可以）

                                        1.float的值不为none

                                        2.overflow的值不为visible

                                        3.display的值为table-cell、tabble-caption和inline-block之一

                                        4.position的值不为static或则releative中的任何一个

 

                3.FBC布局与普通文档流布局区别      

                     普通文档流布局规则

                      1.浮动的元素是不会被父级计算高度

                      2.非浮动元素会覆盖浮动元素的位置

                      3.margin会传递给父级

                      4.两个相邻元素上下margin会重叠

    

                            BFC布局规则

                            1.浮动的元素会被父级计算高度（父级触发了BFC）

                            2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

                            3.margin不会传递给父级（父级触发了BFC）

                            4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

             
              
               kaivon
               
                
                 kaivon1
                 
                  kaivon2
                  
                   
                    kaivon1
                    
                     kaivon2
                     
                      
                       kaivon1
                       
                        
                         kaivon2