背景问题：
文档中有三种流：
普通流-块级元素、行内元素等普通标签。
定位流-定义了position。
浮动流-定义了float为left或者right。
在实际开发中，这三种流之间可能会存在问题。比如margin重合。
margin重合问题：如果两个div上下相邻，两个div同时设置了同一边的margin，margin会产生重合。比如上面的div设置了20px的margin-bottom，下面的div设置了30px的margin-top，两个div之间的margin并不是50px，而是会重合成30px。
html
<body>
<div class="box1">
1
</div>
<div class="box2">
2
</div>
<style>
.box1{
width:200px;
height: 200px;
background-color: aquamarine;
margin-bottom: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: chocolate;
margin-top: 30px;
}
</style>
</body>
BFC是什么
Block Formatting Context 块级元素格式化上下文
BFC是一块被隔离的区域，在每一个BFC中，BFC子元素不会对外部元素产生影响。
BFC如何触发：
body 本身是一个BFC元素
设置float为left或right
设置overflow为hidden、scroll、auto（不为visible）
设置display为inline-block、table-cell、table-caption、flex、grid（不为none、inline、block）
设置position为absolute、fiexed（不是relative）
BFC的作用
处理margin重合/合并问题：
**margin合并：**有时候也叫margin重合等，如果有两个相邻的兄弟div，上面div设置了下外边矩，下面div设置了上外边距，两个外边距会合并，变成两个外边距里较大的一方，而不会相加。
（解决思路：让元素成为BFC的子元素，由于BFC子元素不会对外部元素产生影响，作为子元素的margin是属于BFC内部的，不会在外部发生重合）
要注意，在下面的例子中，BFC是内部子元素不会对外部元素造成影响，因此如果想消除margin重合，应该把两个div包在BFC内，如果两个div本身就是BFC，仍然无法解决margin重合问题。要解决margin重合，并不是所有的触发BFC的方法都可以，只有不影响布局的触发方式才是合适的。
html
<body>
<div class="outer">
<div class="box1">
1
</div>
</div>
<div class="outer">
<div class="box2">
2
</div>
</div>
<style>
.outer{
overflow: hidden;
}
.box1{
width:200px;
height: 200px;
background-color: aquamarine;
margin-bottom: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: chocolate;
margin-top: 30px;
}
</style>
</body>
处理margin塌陷问题：
如果两个div是包含关系，内部的子元素设置了margin-top，那么子元素应该有margin，而父元素不应该有，但实际上，这个margin会影响父元素。
实际上，margin塌陷问题发生在具有包含关系的元素中，父元素的第一个子元素的margin-top会作用在父元素的margin-top上，父元素的最后一个子元素的margin-bottom会作用在父元素的margin-bottom上。
html
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<style>
.box1{
width:200px;
height: 200px;
background-color: aquamarine;
}
.box2{
width: 100px;
height: 100px;
background-color: chocolate;
margin-top: 30px;
}
</style>
</body>
如果不希望子元素的margin影响外部，应该让子元素成为BFC子元素，也就是让父元素成为BFC。
html
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<style>
.box1{
width:200px;
height: 200px;
background-color: aquamarine;
display: inline-block;
}
.box2{
width: 100px;
height: 100px;
background-color: chocolate;
margin-top: 30px;
}
</style>
</body>
处理高度坍塌问题：
如果两个div是父子关系，外部div设置了宽度，内部div设置了宽和高，且内部元素设置了float，
在这种情况下，外部div的高度会消失，并不会按内部div的高度撑开。
html
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<style>
.box1{
width:200px;
border: 2px black solid;
background-color: aquamarine;
}
.box2{
width: 100px;
height: 100px;
background-color: chocolate;
float: left;
}
</style>
</body>
如果希望子元素不影响父元素，也应该把外部父元素成为BFC。
html
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<style>
.box1{
width:200px;
border: 2px black solid;
background-color: aquamarine;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: chocolate;
float: left;
}
</style>
</body>