BFC

BFC-块级格式化上下文

先了解下FC:（Formitting Context）

        CSS2.1规范中的一个概念，他是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他的元素的关系和相互作用，最常见BFC,IFC。（css3增加了GFC,FFC）

再了解下Box:

Box是css布局的基本单位；

        元素的类型和display属性决定了Box类型，    

        Block-level box :

              display:block , list-item, table , 会生成Block-level Box ; 并且参与BFC

       inline-level box :

              display:inline , inline-block , inline-table , 会生成inline-level Box ; 并且参与IFC

       run-in box : CSS3中有

BFC定义：他是一个独立的渲染区域，只有block-level-box参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。

如何触发BFC ? 

1.根元素 （html；

2.float不为none；

3.over-flow:不为visible； 为hidden，scroll,auto;

4.display：inline-block， table-cell , table-caption, flex;

5.position:absolute, fixed;

BFC布局规则：

1.内部盒子会在垂直方向上，一个一个地放置i；

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会重叠；

3每个元素的左边与包含块的左边相接触，即使存在浮动也是如此；

4.BFC的区域不会与float重叠；

5.BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

6.计算BFC高度时，浮动元素也参与计算；

BFC作用及原理:

1.自适应两栏布局（不与浮动元素相重叠）

      对非浮动元素设置overflow：hidden  ------>触发BFC，形成BFC区域

2.清除内部浮动（计算BFC高度时，浮动元素也参与计算）

     对外部父元素形成BFC区域

3.防止margin重叠（属于同一个BFC区域的两个相邻Box的margin会重叠）

    让两个元素不属于同一个BFC，就不会发生margin重叠