BFC和IFC

BFC

BFC（Block Formatting Context）叫做“块级格式化上下文”。BFC的布局规则如下：

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

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

3. 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。

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

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

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

怎样形成一个BFC？

1.根元素；

2.float的属性不为none；

3.position为absolute或fixed；

4.display为inline-block，table-cell，table-caption，flex；

5.overflow不为visible

BFC用处

1.清除浮动

    <div class="outer">
        <div class="inner"></div>
    </div>

        .outer{
            border: 2px solid yellow;
            width: 300px;
        }
        .inner{
            float: left;
            width: 100px;
            height: 100px;
            background: aqua

        }

效果图如下:

可以看到，父div没有被撑开。

回顾一下BFC规范中的第六条：

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

所以我们需要将父div触发为BFC，也就是将其overflow设为hidden：

        .outer{
            border: 2px solid yellow;
            width: 300px;
            overflow: hidden;
        }
        .inner{
            float: left;
            width: 100px;
            height: 100px;
            background: aqua
        }

效果图如下:

2. 布局：自适应两栏布局

    <div class="aside"></div>
    <div class="main"></div>

        div{
            width: 300px;
        }
        .aside{
            width: 100px;
            height: 100px;
            float: left;
            background: salmon
        }
        .main{
            height: 200px;
            background: seagreen
        }

效果图如下:

这正满足了规范的第三条：

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

所以如果我们需要将大的区域撑到小的右边边，就需要利用规范的第四条：

BFC的区域不会与float重叠。

也就是说我们需要创造BFC区域。我们通过将大的区域的overflow设为hidden来触发BFC：

        div{
            width: 300px;
        }
        .aside{
            width: 100px;
            height: 100px;
            float: left;
            background: salmon
        }
        .main{
            height: 200px;
            background: seagreen;
            overflow: hidden
        }

效果图如下：

3. 防止垂直margin合并

    <div class="one"></div>
    <div class="two"></div>

        .one{
            width: 200px;
            height: 100px;
            background:  salmon;
            margin-bottom:20px;
        }
        .two{
            width: 200px;
            height: 100px;
            background: seagreen;
            margin-top: 30px;
        }

效果图如下：

.top和.bottom中间加起来有50px的margin值，但是我们只能看到30px。这是因为他们的外边距相遇发生了合并。

BFC规范的第二条：

盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。

说明两者属于同一个BFC，所以我们需要两个div不属于同一个BFC。

为第二个div套一个父亲div，然后讲其overflow设为hidden来激活一个BFC就可以使margin不再重叠。

    <div class="one"></div>
    <div class="wrap">
        <div class="two"></div>
    </div>

        .one{
            width: 200px;
            height: 100px;
            background:  salmon;
            margin-bottom:20px;
        }
        .wrap{
            overflow: hidden;
        }
        .two{
            width: 200px;
            height: 100px;
            background: seagreen;
            margin-top: 30px;
        }

效果图如下：