HTML+CSS:BFC

        BFC(Block formatting context)的直译为"块级格式化上下文"。
        它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局。并且与这个区域外部毫不相干。

BFC布局规则

1.内部的Box会在垂直方向，一个接一个地放置。

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

3.每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

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

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

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

BFC 特性(功能)

1.使 BFC 内部浮动元素不会到处乱跑。

2.和浮动元素产生边界。

3.属于不同BFC下时可以防止margin重叠。

如何触发元素成为BFC

1.float属性不为none

2.position为absolute或fixed

3.overflow的值不为visible

4.display的值为table-cell，table-caption，inline-block中的任何一个。

BFC常用于解决的问题

外边距塌陷问题

        当我们设置一对父子div时

<div class="div1">
        <div class="div2"></div>
</div>

        设置CSS

.div1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
div2{
    width: 100px;
    height: 100px;
    margin-left: 50px;
    margin-top: 50px;
    background-color: pink;
}

        我们这样想要的目的是使子div在父div的中间，但是实际的效果却是这样

        子div并没有居于父div的中间，这种情况就属于边距塌陷，解决这个问题的方式很简单，就是给父div添加 overflow: hidden; 从而触发BFC即可

        此外，BFC还可用于解决边距合并问题和搭建自适应两栏布局，在这里我就不详细说明，有兴趣的话可以下去尝试一下。