BFC (Block formatting context)

 一：BFC 是什么

     MDN解释：         

           A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other，一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。个人翻译参考百度翻译

          A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.一个BFC块区域包含所有里面的元素，除子元素创建了新的BFC。（因为各个BFC是一个独立的区域，BFC之间相互不影响）

      所以：由于html(根元素)是独立的BFC，在里面的浮动，块级布局等才会相互影响，若新创建BFC,则相邻BFC之间的浮动元素，或是其他元素将不会影响。如,相邻两个块级元素的外边距折叠的情况将不会发生。

 

 二：如何触发BFC

• position为absolute 或者fixed  （总结为 脱离文档流） 
• float不为none（也是要脱离文档流）  
• the root element or something that contains it(根元素可产生独立BFC)
• display值为：inline-block,table-cell,table-caption,flex,inline-flex(flex和inline-flex是css3的特性) 
• overflow:不为visible的任何其他值
• fieldset元素

 三：BFC的作用

• BFC就是一种布局方式，在这种布局方式下，内部盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。  developer center上面有对BFC的一段描述：

  一个 block formatting context 是web页面可视化CSS渲染的一个部分，是一块 block boxes 排布以及 float 元素相互作用的区域。可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响

• 延伸作用1：两个独立的BFC之间不会折叠
• 延伸作用2：BFC可以包裹浮动元素，清除浮动的另一种方法。
• 延伸作用3：解决层内浮动溢出问题，

                      .实例

                          

                           

                          chrome浏览器效果：

                          

                         如图：浮动元素溢出，为content元素创建独立BFC包含浮动元素，可解决浮动溢出

                            

                           

• • 延伸作用4  : 可以阻止元素被浮动元素覆盖      

• •   

参考：http://www.cnblogs.com/youxin/p/3345120.html，

        https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

 

转载于:https://www.cnblogs.com/AliceX-J/p/5221951.html