a，形成BFC的条件：
1，浮动元素float
2，加了overflow:hidden/scoll/auto属性
3，加了定位属性（仅限固定定位fixed和绝对定位absolute，也就是可以脱标的定位）
4，display属性（仅限inline-block，table-cell，table-caption）
b，BFC的特性：
1，内部的盒子会在垂直方向1个接1个的摆放，和标准流一样
2，垂直方向的两个盒子margin值由最大的那个margin值决定
（比如垂直方向的两个盒子，box1的margin-bottom:10px，而box2的margin-top:20px，它们之间的上下间距实际是20，不是叠加后的30。解决方法：把box1放在1个单独的盒子内）
3，BFC区域不和浮动元素重叠
（比如box1设置了浮动属性float：left，box2设置了overflow：hidden，这时两个盒子是不会重叠的，代码见下面）
4，BFC计算高度时，float元素也会参与计算
（比如父盒子没有设置高度，它的子盒子有高度但是设置了float浮动属性，这个时候父盒子不会被子盒子撑开，也就是父盒子依旧没有高度，如果希望父盒子被子盒子撑开，只需让父盒子变成BFC，方法就是给父盒子设置overflow：hidden属性）
5，BFC是一个独立的容器，里面的子元素不好影响到外面的元素
BFC区域不和浮动元素重叠代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
</head>
<style>
* {
box-sizing: border-box;
}
body {
max-width: 1200px;
min-width: 320px;
margin: 0 auto;
}
/* BFC Start */
.box1 {
width: 200px;
height: 100px;
background-color: pink;
float: left;
}
.box2 {
width: 400px;
height: 300px;
background-color: skyblue;
overflow: hidden;
}
/* BFC End */
</style>
<body>
<!-- BFC start -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<!-- BFC end -->
</body>
</html>实际效果：