css-BFC概念

div{
width:100px;
height:100px;
} 
.one{
background-color: #3c3c3c;
margin-bottom: 30px;
} 
.two{
background-color: #1e83d3;
margin-top:30px;
margin-bottom: 30px;
}
.three{
background-color: #11a197;
margin-top:30px
}
 <div class="one"></div>
<div class="two"></div>
<div class="three"></div>

会发现相邻两个div之间的margin发生了折叠；为了解决这个问题；我们就引出了BFC这个概念

BFC概念： 
Block Formatting Contexts 块级格式化上下文，
其中Formatting Context是一个决定如何渲染文档的容器
创建的BFC元素就是一个独立的盒子，只有block-level box(块级盒子)可以创建BFC，它规定了内部的
block-level box如何布局，并且这个独立的盒子里的布局不受外部影响，它也不会影响到外面的元素

BFC特性：
1:内部的box会在垂直方向，从顶部开始一个接着一个地放置
2:box垂直方向的距离由margin巨鼎。属于同一个BFC的相邻box的margin会发生叠加
3:BFC的区域不会和float box叠加
4:BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
5:计算BFC高度时；浮动元素也参与计算

BFC的触发：
1:设置float(left|right)除了none
2:设置overflow(hidden | auto | scroll)除了visible
3:设置display(inline-block | inline-flex | table-cell | table-caption)
4:设置position(absolute | fixed)

 

关于上面div的margin折叠现象；我们就可以使用BFC来解决了

我们可以给上面的三个div添加display:inline-block属性触发BFC；这样就不会发生折叠了 

下面就BFC应用来说明：

先给出代码

.d1{

width:100px;

height:100px;

background-color: #11a197;

float: left;

}

.d2{

width:300px;

height:200px;

background-color: #3c3c3c;

}

<div class="parent">

<div class="d1"></div>

<div class="d2"></div>

</div>