BFC：（Block Formatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。
自适应两栏布局
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反。即使存在浮动也是如此。我们可以利用原理BFC的区域不会与float box重叠，实现自适应两栏布局。
<style>
.big {
margin-top:200px;
margin-left:200px;
width: 200px;
height: 200px;
background-color:pink;
}
.small-1 {
width: 100px;
height: 150px;
background-color: purple;
float: left;
}
.small-2 {
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="big">
<div class="small-1">
</div>
<div class="small-2">
</div>
</div>
</body>
.small-2 {
height: 200px;
background-color: deeppink;
overflow: hidden;
}清除内部浮动
为达到清除内部浮动，我们可以触发外部元素生成BFC，那么外部元素在计算高度时，外部元素内部的浮动元素child也会参与计算
<style>
.big {
width: 300px;
background-color:pink;
border: 1px solid blue;
}
.small {
width: 100px;
height: 100px;
background-color: purple;
border: 1px solid #ccc;
float: left;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
.big {
width: 300px;
background-color:pink;
border: 1px solid blue;
overflow: hidden;
}防止垂直方向margin合并
产生外边距合并原因：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生合并
解决方法：垂直方向上的外边距合并，可以在其中的以一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便不属于同一个BFC，就不会发生margin重叠了。
父元素与子元素发生外边距合并解决方法： 给子元素或者父元素创建BFC
（1）给父元素创建BFC：overflow、float、position、display(即如何生成BFC（2-5）)
（2）给子元素创建BFC：float、position、display(即如何生成BFC（3-5）) （此处不能使用overflow）、给子元素外面包裹一层容器，并触发该容器生成一个BFC
（ps：应用原理BFC区域是一个独立的区域，不会影响外里面的元素。）
父元素与子元素发生外边距合并解决方法： 给子元素或者父元素创建BFC
<style>
.big {
width: 100px;
height: 100px;
background-color: #ffc0cb;
}
.small {
width: 50px;
height: 50px;
margin-top: 50px;
background-color: purple;
}
</style>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
给父元素创建BFC：overflow、float、position、display(即如何生成BFC（2-5）)
.big {
width: 100px;
height: 100px;
background-color: #ffc0cb;
overflow: hidden;
/* float: left; */
/* position: fixed;
/* display: inline-block; */
}
给子元素创建BFC：float、position、display(即如何生成BFC（3-5）) （此处不能使用overflow）
.small {
width: 50px;
height: 50px;
margin-top: 50px;
background-color: purple;
/* float: left; */
display: inline-block;
/* position: fixed; * }<style> .big {
BFC：（Block Formatting Context）：块级格式化上下文。它理解成一个独立的区域。