BFC: block formatting context（块级格式化上下文）

      
我们知道HTML里的元素，有内联元素与块级元素之分，这是浏览器代理默认的CSS效果，即统一设置了默认的CSS属性。

      
但是，除了这些默认设置效果之外，我们还可以自己设置，使其呈现不同的效果，如：

div {
    display: inline;
}

span {
    display: block;
}

      
这其实就是改变了默认的效果

      
上面是，最直接的改变呈现结果，除此之外，在CSS里我们可以通过一些其它属性也能改变其呈现效果，这就是我们要说的BFC

解释：BFC（块级格式化），就是使元素呈现块级效果，它的作用主要体现在，和外部元素之间的关系，以及内部子元素的显示效果

什么属性能触发BFC：

• HTML根元素（一般平时也没怎么用）
• float:值非none
• overflow: 值非visible(这个时候默认值，溢出可见)
• display: inline-block/table-cell/table-caption(仅仅只有这几个，不要想当然的认为其它也可以，display: block;都不行)
• position: absolute/fixed;

      
理解：这些块级格式化并不一定只是作用于inline元素，如果这样论，那overflow将不能起作用，BFC一样可以作用于block元素；

      
并且，BFC产生的“块级格式化上下文”元素，还不完全等同于，要不然，怎么会display:block反而没有效果，毕竟还是有些区别的（有兴趣，这里面可以深究）

BFC的作用效果：

1. 使得元素不会被浮动元素覆盖；
2. 可以包容住浮动元素；
3. 不属于同一个BFC两个div垂直外边距不会合并；

      
理解：前两条好理解，这里面探讨的其实是，float和absolute谁的级别更高些。

      
回顾： 浮动和绝对定位都使得元素脱离文档流，都生成块级元素，都不占据空间，所以都可覆盖正常文档流，但是，float只能覆盖背景，不会覆盖文字，而absolute彻底覆盖

      
回到上面的解释： BFC产生的元素，姑且都认为是absolute元素