BFC

一、理解BFC

BFC ：块级格式化上下文，就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

BFC 特性(功能)
        1. 清除浮动（使 BFC 内部浮动元素不会到处乱跑）；2. 和浮动元素产生边界，阻止元素被浮动元素覆盖；3. 属于同一个BFC的两个相邻的Box的margin会发生重叠，与方向无关

二、哪些元素会生成BFC？

根元素
        float的值不为none； 
        position的值为absolute,fixed(不为static,relative中的任何一个)；
        overflow的值不为visible(可以为hidden,scroll,auto)；
        display的值为inline-block,table-cell,table-caption,flex,inline-flex中的任何一个， display：table也认为可以生成BFC，其实这里的主要原因在于table会默认生成一个匿名table-cell，正是这个匿名的table-cell生成了BFC。

三、BFC的作用及原理

（1）自适应两栏布局

效果如下

特性2：和浮动的元素产生界限。

改变方法：触发right 生成BFC， 来实现自适应两栏布局，当触发right 生成BFC后，这个新的BFC不会与浮动的 aside 重叠，right会根据包含块的宽度和 left 的宽度，自动变窄。（一个盒子的边框会由于浮动而收缩，盒子本身将会变得更窄）

.right { overflow: hidden;}//或者利用上述其他方式为它生成 BFC

（2）清除内部浮动

特性1 使BFC内部元素不乱跑

触发 section 生成BFC，那么 section 在计算高度时，section 内部的浮动元素 child 也会参与计算。

section{overflow:hidden}

(3)防止垂直 margin 重叠

特性3，Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

修改：,我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了

因为BFC内部的元素和外部的元素绝对不会互相影响；因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠；同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度；避免margin重叠也是这样的一个道理

四、详细分析 margin 折叠

1、产生的原因
        这些margin都处于普通流中，并在同一个BFC中，这些margin没有被非空内容、padding、border或clear分隔开，这些margin在方向上是毗邻的。

２、包含的情况：
一个box的margin-top与第一个子box的margin-top
一个box的margin-bottom与最后一个子box的margin-bottom，但须在该box的height:auto的情况下
一个box的margin-bottom与紧接着的下一个box的margin-top
一个box的margin-top与其自身的margin-bottom，但须满足没创建BFC

３、折叠边距的计算
        1）当两个margin都是正值的时候，取两者的最大值；
        2）当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
         3）当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

NOTE：所有毗邻的margin要一起参与运算，不能分步进行。

五、举个例子：
１)用 浮动布局 显示成两行两列 ——(为了解决浮动布局里的一个问题：元素浮动不换行怎么办？）

我们可以看到四个盒子最终都处在一列里面，为了达到我们的目的，可以在其中一个外层盒子建立一个BFC

2、实现多栏布局的一种方式
        特性2：BFC的区域不会与float box重叠。(与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖)