一、概念
BFC：Block formatting context 块级格式化上下文；
形成独立的渲染区域
内部元素的渲染不会影响外界
形成 BFC 的常见条件：
- 浮动元素： float 不是 none；
- 绝对定位元素 position 是 absolute 或者 fixed；
- 块级元素 overflow 不是 visible；
- flex元素；
- inline-block元素
应用场景：
清除浮动 等。
二、例子
是因为图片img左浮动了，脱离了文档流。
所以，container的高度是由P标签的高度决定的，如果我们希望container高度由这个img标签来决定。
我们可以这么做，我们在CSS文件中定义一个.bfc的类，找到一个行程BFC的条件，比如：overflow:hidden;
为啥这么做高度就正常了呢。因为container这个div加了一个overflow: hidden;
这就是说：
container这个div会 “形成独立的渲染区域，内部元素的渲染不会影响外界”，img就是内部元素啊，保证img渲染不会影响到外部。按照img高度渲染整个container的高度。不然img就超过container的高度了，不符合BFC的逻辑。
虽然img标签，float浮动了，但container依旧会把这个浮动的元素算进去，保证它不出格，得到最终的高度。
但是，也有问题，虽然看着没问题，实际上是有问题的，p占据了img的位置，这不是我们想要的结果，我们不想让P占据img的位置。
怎么解决呢？我们再次使用BFC的功能，将P标签也加上.bfc的类。那么p也形成了BFC：p形成独立的渲染区域，p不能侵占了img，只能在自己的区域渲染。
复习知识
复习一下常见的定位方案
第一：普通流（默认）
第二：浮动
第三、绝对定位
而BFC属于普通流。
BFC可以看做是元素的一种属性，当元素有了BFC属性，元素就可以看做是隔离了的独立容器。
容器里面的元素不会在布局上影响到外面的元素。
如何触发BFC？
BFC的特性和应用
1、BFC可以避免外边距重叠
这是规范，不是bug：
块的上外边距margin-top和下外边距 margin-bottom会合并为单个边距，其大小为单个边距的最大值，这就是外边距重叠现象。
如何解决呢 ？
只要将两个div放在不同的BFC中。那么两个BFC的内容不会互相干扰。
2、BFC第二个作用，清除浮动。
两个div，父子关系，子元素设置float为left。
但是，事与愿违。
子div是浮动的，脱离了文档流。
我们可以通过overflow属性触发父容器的BFC，那么父容器会包裹这子元素，从而达到了清除浮动的目的。
三、阻挡元素被浮动元素覆盖
阻止元素被浮动元素覆盖
如果想要避免被覆盖，可以触发正常元素的BFC属性。
所以，在下面正常元素加了overflow属性，这样两个属性就不会互相干扰。
