关于BFC的概念、触发与应用

什么是BFC

W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

触发BFC

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
下列方式会创建块格式化上下文：

• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

BFC的原理（渲染规则）
（1）BFC垂直方向边距重叠问题
（2）BFC的区域不会与浮动元素的box重叠
（3）BFC是一个独立的容器，外面的元素不会影响里面的元素
（4）计算BFC高度的时候浮动元素也会参与计算

BFC 应用

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

.container{
            border: 10px solid red;
            min-height: 20px;
            /*该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。*/
        }
        .inner{
            background: #08BDEB;
            height: 100px;
            width: 100px;
        }

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

产生效果是这样：

如果给.inner加上float或者绝对定位

.inner{
            background: #08BDEB;
            height: 100px;
            width: 100px;
            float: left;
        }

效果是这样：

因此根据上面产生BFC的方法，使.container变成BFC，.inner就变回原来的被包裹的状态：

.container{
            border: 10px solid red;
            min-height: 20px;
            overflow: hidden;
        }

2. 利用BFC避免外边距折叠

BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

<div class="container2">
    <div class="inner2">段落1</div>
    <div class="inner2">段落2</div>
    <div class="inner2">段落3</div>
</div>

		.container2 {
            background-color: red;
            overflow: hidden;
        }
        .inner2{
            background-color: lightgreen;
            margin: 10px 0;
        }

效果：

由于外边距折叠，三个相邻P元素之间的垂直距离是10px，这是因为三个 div 标签都从属于同一个BFC。

如果把第三个div包裹一层新的div，并触发BFC：

<div class="container2">
    <div class="inner2">段落1</div>
    <div class="inner2">段落2</div>
    <div class="bfc">
        <div class="inner2">段落3</div>
    </div>
</div>

		.bfc{
            overflow: hidden;
        }

效果：