知识点整理之---什么是BFC，BFC能做什么

什么是BFC？

说句实话，我最早看的时候，把官网定义看了两遍，没看明白究竟它是什么。
直到后来，慢慢的再看一些帖子，了解的更多之后，才恍然知道它究竟是个什么东东。

W3C对BFC的定义如下：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

现在我们来总结一下，究竟什么是BFC呢？

BFC简称块级格式化上下文，是官方的边距重叠解决方案。简单来说，BFC就是页面的块区域，限定了浮动元素和其他元素的交互区域，可以解决边距重叠问题。
BFC是一个独立的布局环境，其中的元素布局是不受外界影响的，并且在一个BFC中，块盒和行盒（行盒由一行中所有的内联元素所组成），都会垂直的沿着其父元素的边框排列。

怎么创建BFC?

创建BFC有四种方法，满足其中一种就可以创建：

1、float的值不是none；
2、position的值不是static或者relative；
3:、display的值是inline-block、table-cell、flex、table-caption或者inline-flex;
4、overflow的值不是visible。

上述方法都可以创建BFC，但是会带来一些负面影响：

1、display：table 可能会引发响应性问题；
2、overflow：scroll 可能产生多余的滚动条；
3、float：left 将把元素移至左侧，并被其他元素环绕；
4、overflow：hidden 将裁切溢出元素。