什么是bfc？
bfc即Block Formatting Contexts,直译过来就是块级格式化上下文。BFC就是一个独立的容器，容器内的子元素不会影响到外面的元素。
如何创建bfc？
只要满足以下任意条件之一就可以了
- float不为none
- position不为relative或static``
- overflow不为visible
- display为flex，inline-flex，inline-block,table-cell,table-caption
bfc有什么用？
1解决margin塌陷
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
width: 500px;
height: 300px;
}
.one{
width: 200px;
height: 100px;
background-color: wheat;
margin: 10px;
}
.two{
width: 200px;
height: 100px;
background-color: greenyellow;
margin: 10px;
}
</style>
</head>
<body>
<div class="content">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
在这段代码中我们给盒子里的两个子盒子设置了10个像素的margin，如果按预期的话，在两个盒子中间应该是有20个像素的margin，但结果不是这样。
从上图可以看出，由于margin塌陷，中间的两个10像素被合并为一个，对此我们可以给下面这个盒子一个新的盒子，设置它的overflow：hidden（设置在容器里的），就可以隔离这两个盒子。修改后：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
width: 500px;
height: 300px;
}
.bfc{
overflow: hidden;
}
.one{
width: 200px;
height: 100px;
background-color: wheat;
margin: 10px;
}
.two{
width: 200px;
height: 100px;
background-color: greenyellow;
margin: 10px;
}
</style>
</head>
<body>
<div class="content">
<div class="one"></div>
<div class="bfc">
<div class="two"></div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: wheat;
}
.two{
width: 100px;
height:100px;
background-color: greenyellow;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
</div >
</div>
</body>
</html>
同样的，我要把.two盒子移到.one中间，结果并不是我预料的。
这时可以设置.one为overflow：hidden，把.one和.two隔离起来。就可以了
2容纳浮动元素
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
width: 500px;
background-color: yellow;
}
.one{
width: 200px;
height: 100px;
background-color: wheat;
float: left;
}
.two{
width: 200px;
height: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="content">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>
给两个盒子设置了浮动，由于大盒子没有设置宽度，盒子脱离文档流后大盒子也就没有了高度。所以可以给.content设置overflow:hidden，高度又有了。
3阻止文本环绕
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 200px;
float: left;
}
</style>
</head>
<body>
<img src="img/3.png"/>
<p>3sssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsddddddddd</p>
</body>
</html>
当页面太小时，文本会环绕在图片周围，
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 200px;
float: left;
}
p{
overflow: hidden;
}
</style>
</head>
<body>
<img src="img/3.png"/>
<p>3sssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsdddsssssssssssssssssssssssssss
dsddddddddd</p>
</body>
</html>
给p加一个overflow：hidden后文本就不会环绕。