BFC 块级格式化上下文

BFC（block formatting context）就是隔离子元素 成一个独立的行政区域，之间互不影响
一、概念
元素的一种属性，影响元素的定位以及与兄弟元素之间的相互作用。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其他环境中的布局。
比如浮动元素会形成BFC,浮动元素内部子元素受浮动元素影响，两个浮动元素之间是互不影响的。
也就是说，当一个元素BFC成立，那么它的布局和定位就是独立不受干扰的。
二、元素设置
1.display设置其中之一：block,inline-block,table,table-cells,table-captions,list-item；
2.浮动元素，float除none以外的值；
3.position:absolute,fixed;
4.overflow:auto,hidden,scroll
三、说明
1、浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。
2、在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素是脱离BFC这一布局环境的，不参与BFC的布局
3、在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)，除非这个盒子新建了一个块级排版上下文(在某些情况下这个盒子自身会因为floats而变窄)。