对CSS中的BFC的理解

一、何为BFC

BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、形成BFC的条件

1、浮动元素，float 除 none 以外的值
2、定位元素，position（absolute，fixed）
3、display为inline-block、table-cell、table-caption、flex、inline-flex
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC的特性

1､ 内部的Box会在垂直方向上一个接一个的放置。
2､ 垂直方向上的距离由margin决定。
3､ bfc的区域不会与float的元素区域重叠。
4､ 计算bfc的高度时，浮动元素也参与计算。
5､ bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

看到这里是不是有丈二和尚摸不着头脑的感觉，下面我就用案例来帮助理解认识：

四、实践是检验真理的唯一标准

（1）解决外边距合并问题

在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。
html：

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

css：

.container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: red;
}

.box1 {
    height: 20px;
    margin: 10px 0;
    background-color: green;
}

.box2 {
    height: 20px;
    margin: 20px 0;
    background-color: green;
}

这里我门可以看到，第一个子盒子有上边距（不会发生margin穿透的问题）；两个子盒子的垂直距离为20px而不是30px，因为垂直外边距会折叠，间距以较大的为准。

那么有没有方法让垂直外边距不折叠呢？
答案是：有。特性的第5条就说了：bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。

html：

<div class="container">
    <div class="wrapper">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</div>

css：

.container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: red;
}

.wrapper {
    overflow: hidden;
}

.box1 {
    height: 20px;
    margin: 10px 0;
    background-color: green;
}

.box2 {
    height: 20px;
    margin: 20px 0;
    background-color: green;
}

（2）制作自适应宽度的布局

以常见的两栏布局为例。
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
html：

<div class="column"></div>
<div class="column"></div>

css：

   .column:nth-of-type(1) {
        float: left;
        width: 200px;
        height: 300px;
        margin-right: 10px;
        background-color: red;
    }
    
    .column:nth-of-type(2) {
        overflow: hidden;/*创建bfc */
        height: 300px;
        background-color: purple;
    }

还有三栏布局。
左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。
html：

<div class="contain">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

css：

.column:nth-of-type(1),
.column:nth-of-type(2) {
    float: left;
    width: 100px;
    height: 300px;
    background-color: green;
}

.column:nth-of-type(2) {
    float: right;
}

.column:nth-of-type(3) {
    overflow: hidden;  /*创建bfc*/
    height: 300px;
    background-color: red;
}

（3）用来防止字体环绕

众所周知，浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。
html：

<div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
   你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
   你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>

css：
环绕

.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

p {
    background-color: green;
    /* overflow: hidden; */
}

利用bfc防止环绕

.left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

p {
    background-color: green;
    overflow: hidden;
}

（4）清除元素内部浮动

只要把父元素设置为bfc就可以清除子元素的浮动，最常见的就是给父元素添加overflow：hidden属性。因为浮动的盒子无法撑出处于标准文档流的父盒子的height。

<div class="father">
     <div class="son1"></div>
     <div class="son2"></div>
</div>

.father {
    width: 150px;
    border: 1px solid red;
}

.son1, .son2 {
    width: 50px;
    height: 50px;
    background-color: pink;
}

.son2 {
    background-color: purple;
}

如下图显示：

当给两个子元素设置了float属性之后，子元素不再占据父元素的空间，此时父元素的高度就为0
当设置父元素bfc后，此时就清除了子元素浮动带来的影响，什么影响呢，就是不撑开父元素的高度的影响，那么父元素的高度就是子元素的高度
为父元素添加overflow: hidden;

总结
我希望这篇文章已经向你展示了BFC的相关特性，以及他们如何影响元素在页面上的视觉定位。所有的例子都展示了它们在实际案例中的应用，这应该会使得他们更加清晰。