bfc 解決盒子margin重疊問題
一個HTML元素要創建BFC，則滿足下列的任意一個或多個條件即可：
1、float的值不是none。（float:left 或者float:right）
2、position的值不是static或者relative。（position:absolute或者position:fixed）
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible（overflow:hidden、overflow:scroll）
5、父元素與正常文件流的子元素（非浮動子元素）自動形成一個BFC
BFC中盒子怎麼對齊
在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列
W3C給出得規範是：在BFC中，每一個盒子（子元素）的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。浮動也是如此（儘管盒子裏的行盒子 Line Box 可能由於浮動而變窄）。
.
圖片: 
正常情況下一個BFC是由父元素和子元素組成的，有時候也只有一個父元素
BFC的特徵
（1）所有子元素（包含浮動元素）與容器（父元素）左邊對齊
（2）屬於同一個BFC的父元素和子元素，相鄰的父子或者兄弟間margin垂直方向會重疊，若2個元素屬於不同的BFC，則垂直方向不會重疊
（3）可以自動撐開容器（若子元素是float的，父元素設置overflow:hidden，父元素就形成一個BFC）
防止margin重疊我們就可以從BFC的特徵入手，讓2個相鄰的元素不是屬於一個BFC
<style>
.container1 {
color: #fff;
}
.first {
margin-bottom: 20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: #28adbd;
}
.second {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: #6871c1;
}
</style>
<body>
<div class="container1">
<div class="first">first p</div>
<div style="overflow:hidden">
<div class="second">second p</div>
</div>
</div>
</body>
由於class 爲second的元素外面套了一個div（一定要套一個div，因爲overflow:hidden 是設置在父元素上，裏面一定要有子元素），並設置了overflow:hidden，相當於新創建了一個新的BFC, first 與second 屬於2個BFC所以margin不會重疊
另一種方法，子元素浮動，浮動相當於新建了BFC,所以不會重疊
<style>
.container1 {
color: #fff;
width:200px;
}
.first {
margin-bottom: 20px;
padding-left: 10px;
height: 200px;
width: 200px;
background-color: #28adbd;
}
.second {
margin-top: 20px;
height: 200px;
width: 200px;
background-color: #6871c1;
}
</style>
<body>
<div class="container1">
<div class="first" style="">first p</div>
<div class="second" style="float:left">second p</div>
</div>
</body>
相鄰的子元素2個都浮動或者下面的一個浮動