目录
BFC的概念
BFC的作用
把元素变成BFC元素的方法
BFC的概念
BFC是Web页面的可视CSS渲染的一部分，我们可以认为BFC是一个封闭的大箱子，无论箱子内部的元素如何变动，都不会影响到外部。
BFC的作用
首先我们来看一段代码
<!DOCTYPE html>
效果如图
我们发现 我们给里面的div加了上边距应该让他在大div里向下移动，而结果是都往下移了100px相当于给外面的div加了上边距，造成这个问题的原因就是我们外面的div没有闭合，导致上边距溢出，所以就出现了上面这种情况。
解决办法就是将外面的div变成BFC元素，也就是把他闭合起来。
把元素变成BFC元素的方法
float的属性不为none。
position的属性为absolute，fixed。
overflow的属性不为visible。
通过伪元素
.box1::after,
.box1::before {
content: '';
display: table;
}
.box1::after {
clear: both;
}
当我满足以上任意条件时，外面的div就会变成一个BFC元素，效果如图
大家可以看到外面的div上边距已经没有了，因为里面的div背景颜色也为黑色，下面我进行修改
可以看到里面的div上边距已经给上了，所以这就是BFC的作用，可以让一个元素封闭起来，让里面的元素不会影响外面的元素从而进行更好的布局。BFC一般与浮动相使用来布局，我将会在之后更新浮动的一些文章。
