BFC ：(Block Formatting Context)， 名为 “块级格式化上下文”。

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

简单来说就是，BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签。

 

怎么触发BFC？

BFC可以看做是一个CSS元素属性

  • overflow: hidden
  • display: inline-block
  • display: table-cell
  • display: flex
  • position: absolute
  • position: fixed

BFC解决了什么问题

1.使用Float脱离文档流，高度塌陷

<div class="container">
        <div class="box"></div>
</div>
<style>
        .box {
            width: 100px;
            height: 100px;
            float: left;
        }
        .container {
            border: 1px solid red;
        }
</style>

给box设置完float之后，脱离文档流，使container高度没有被撑开。解决此问题可以给container触发BFC，上面我们所说到的触发BFC属性都可以设置。

.container {
            border: 1px solid red;
            overflow: hidden;
}

2.Margin边距重叠

<div class="box"></div>
<div class="box"></div>
<style>
        .box {
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .container {
            border: 1px solid red;
        }
</style>

两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这时margin边距的结果为最大值10px，而不是和20px，这就导致了margin塌陷问题。解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响 ）

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

.p{
  overflow: hidden;  
}

3.两栏布局

<div style="float: left;">
</div>
<div style="width: 300px;">
</div>

div {
    　　width: 200px;
    　　height: 100px;
    　　border: 1px solid red;
}

第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

<div style="float: left;">
</div>
<div style="width: 300px;display:flex;">
</div>