什么是BFC?

BFC(块级格式化上下文)(Block formatting context)

直译为"块级格式化上下文"。是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

1 元素的显示模式

元素的显示模式 display。

分为 块级元素 行内元素 行内块元素 ，其实，它还有很多其他显示模式。

2 那些元素会具有BFC的条件

不是所有的元素模式都能产生BFC，w3c 规范：

display 属性为 block, list-item, table 的元素，会产生BFC.

这个BFC 有着具体的布局特性：

有宽度和高度 ， 有 外边距margin 有内边距padding 有边框 border。

3 BFC的触发条件

要给这些元素添加如下属性就可以触发BFC。

• float属性不为none
• position: absolute/fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible。

4 BFC元素所具有的特性

BFC布局规则特性：

1. 属于同一个 BFC 的两个相邻 Box 垂直排列
2. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
4. BFC 的区域不会与 float 的元素区域重叠，而是紧贴浮动边缘。
5. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
6. 文字层不会被浮动层覆盖，环绕于周围

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

5 BFC的主要用途

BFC能用来做什么？

1. 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

主要用到

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

2. 解决外边距合并问题

外边距合并的问题。

主要用到

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

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

    <div class="father">
        <!--over隔开，那么 son1 就和son1 不是同一BFC-->
        <div class="over">
            <div class="son1"></div>
        </div>
        <div class="son2"></div>
    </div>
-----------------------------------------------
        .father {
            width: 300px;
            height: 500px;
            border: 1px solid red;
        }

        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        .son1 {
            margin-bottom: 50px;
        }

        .over {
            overflow: hidden;
        }

        .son2 {
            background-color: purple;
            margin-top: 100px;
        }

3. 制作右侧自适应的盒子问题

主要用到

普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文

        .father {
            width: 400px;
            height: 500px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
        .txt {
            height: 300px;
            background-color: rgba(0, 0, 0, 0.4);
            /*给txt 创建BFC 区域 在不和浮动产生交集 紧贴制浮动的边缘 */
            overflow: hidden;
            /* 不使用float是应为float会使盒子大小随着content的内容改变 */
            /* float: left; */
        }