BFC，块格式化上下文（Block Formatting Context）。W3C CSS2.1中的一个概念。

FC：它是一块渲染区域，遵守相应的渲染规则，这些规则决定了：

　　内部元素的定位方式

　　与外部元素的位置关系

BFC的布局渲染规则：

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

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

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

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

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

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

如何触发BFC：

　　html根元素

　　float值不是none的元素

　　overflow不是visible的元素

　　display值为inline-block，table-cell，table-caption的元素

　　position值为absolute，fixed元素

BFC的四个代码实验：

　　自适应的两栏布局

=====================举例============================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            height: 800px;
        }

        .left {
            width: 300px;
            background-color: #f00;
            float: left;
            margin-right: 10px;
        }

        /* 通过把.right变成BFC来使得其不与float重合 */
        .right {
            background-color: #000;
            /* 变成BFC的其中一个方法 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>
=====================效果============================
什么是BFC？_3c

 

 

　　阻止元素被浮动元素覆盖

=====================举例============================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .left {
            width: 300px;
            height: 800px;
            background-color: #f00;
            float: left;
            margin-right: 10px;
        }

        /* 通过把.right变成BFC来使得其不与float重合 */
        .right {
            height: 800px;
            background-color: #000;
            /* 变成BFC的其中一个方法 */
            overflow: hidden;
        }

        .mid {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            overflow: hidden;
            /* 或者变成float:left也可以 */
        }
    </style>
</head>
<body>
    <div>
        <div class="left"></div>
    </div>
    <div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>
</body>
</html>

　　清除内部的浮动（无例子）

　　分属于不同BFC的box，margin不会合并

=====================举例============================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1,
        #div2{
            width: 200px;
            height: 200px;
        }

        #div1 {
            background-color: #f00;
            margin-bottom: 100px;
        }

        #div2 {
            background-color: #000;
            margin-top: 50px;
        }

        .div2-wrap {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div class="div2-wrap">
        <div id="div2"></div>
    </div>
</body>
</html>
=====================效果============================
什么是BFC？_自适应_02