BFC：块级格式上下文

MDN上的解释：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

常见的布局方案

Box是CSS的布局基本单位

1. 普通流(常规流)
2. 浮动流(float)
3. 定位流(绝对定位)

BFC：决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用,是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。。

BFC特性：

1.相邻的margin会重叠

• Box会在垂直方向上依次排序，其中间距由margin决定，如果两个相邻的Box属于同一个BFC，那么相邻的margin会重叠。
• 解决：将每个都变成BFC，即可消除margin坍塌现象。

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

<!--解决-->
<div class="box">
    <div class="demo"></div>
    <div style="overflow:auto">
	   <div class="demo"></div>
	</div>
</div>
<style>
    .demo{
        width: 100px;
        height: 100px;
        background: red;
        margin: 20px;
    }
</style>

2. 阻止元素被浮动元素覆盖

<div class="box">
    <div class="demo demo1"></div>
    <div class="demo demo2"></div>
</div>
<style>
    .demo{
        width: 100px;
        height: 100px;
        background: red;
        margin: 20px;
    }
    .demo2{
    	float:left;
    }
	/*解决demo1被覆盖*/
	.demo1{
		overflow:auto;
	}
</style>

3. 解决用一个 div 包裹另一个浮动的 div 时，外层的 div 无法被撑开的情况

<div class="box">
    <div class="demo"></div>
</div>
<style>
    .demo{
        width: 100px;
        height: 100px;
        background: red;
        float:left;
    }
    /*此时box的高度为0，解决*/
    .box{
    	overflow: auto;
    }
</style>

总结：BFC就像是一个封闭的大盒子，有一套自己的规则，无论内部如何倒腾，都不会影响到外部，反之亦然。

BFC的创建规则：

• body根元素
• 浮动元素：float:left/right
• 绝对定位元素：position:absolute/fixed
• display:inline-block/table-cells/flex/table/grid…
• overflow:hidden/auto/scroll