1.BFC的相关概念
BFC（block formatting context）：块级格式化上下文！一个独立的布局环境，一种布局规则！其中的元素布局不受外界的影响！在一个BFC中，块盒和行盒都会垂直的沿着父元素的边框排列！即子元素的margin-left会贴着父元素的border-left排列。事实上，<html>标签就创建了一个BFC，对于块元素来说，在正常的流中，就是垂直的沿着父元素的边框排列。（这也是BFC的排列方式）
那么怎样能创建出一个BFC呢？
一个HTML元素创建一个BFC，满足下面一个条件或几个条件即可：
1）float为left ，right或者both
2) position为absolute或者fixed
3) opacity的值小于1
4）overflow的值为hidden
5）display的值为inline-block, table-cell, table-caption, inline-flex, flex，grid, inline-grid等等
2.BFC的用途
1）利用BFC避免上下边距的折叠
在流的概念的，两个元素之间左右外边距是不会折叠，但是上下边距是会折叠的。
我们对上下两个元素的其中一个创建BFC（可以用overflow:hidden；这是比较常见的方式），即可避免上下两个元素的边距重叠
先看下面外边距被折叠的情况：
<html>
<head>
<style type="text/css">
.top,.bottom{
margin:10px;
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
为其中的一个子元素创建BFC：
<html>
<head>
<style type="text/css">
.top,.bottom{
margin:10px;
width:100px;
height:100px;
background:red;
}
.newBFC{
overflow:hidden;
}
</style>
</head>
<body>
<div>
<div class="top"></div>
<div class="newBFC"><div class="bottom"></div></div>
</div>
</body>
</html>
2）BFC包含浮动
在我们使用浮动后，在没有设置父元素的具体高度时，很有可能造成父元素的塌陷，即浮动内容是不会把父元素的盒子撑开的！
在为父元素创建了BFC之后，就可以撑开父元素容器。
先展示第一种情况：
<html>
<head>
<style type="text/css">
.left{
margin:10px;
width:100px;
height:100px;
background:red;
float:left;
}
.father{
width:100%;
background:blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
</div>
</body>
</html>
从上面可以看出，父元素的蓝色背景根本就没有，也就是说父元素没有被浮动元素撑开！
<html>
<head>
<style type="text/css">
.left{
margin:10px;
width:100px;
height:100px;
background:red;
float:left;
}
.father{
width:100%;
background:blue;
overflow:hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
</div>
</body>
</html>
从上面可以看出，为父元素创建BFC，父元素容器被浮动元素扩宽了！！！
3）创建BFC避免文字环绕
在使用浮动时，文字是会绕着浮动元素进行流操作的。这时我们可以为包含文字部分的元素创建一个BFC，从而在布局时会以浮动元素的边界作为排列时的边界，从而达到避开文字环绕的效果！
<style type="text/css">
img{
float:left;
}
</style>
创建了BFC之后：
<style type="text/css">
img{
float:left;
}
p{
overflow:hidden;
}
</style>
本博客由博主原创，如需转载需说明出处！谢谢支持！