除去以下要讲的“上下文三兄贵”，其他的知识点如float、flex、rem、icon、bootstrap等知识都会在各种实际项目中体现，在此不多讲述。
1.堆叠上下文
1.1. z-index
先要讲的就是z-index，在浏览器中显示的先后顺序。
自下而上分别是：
负z-index < background <border < div块级 < 浮动元素 < z-index:0/auto < 正z-index
1.2.堆叠上下文
触发堆叠上下文后，其内部元素自成体系，不与父元素外的元素对比。在一个堆叠上下文里，谁大谁上，一样大就后来居上。
触发堆叠上下文
- 根元素HTML
- z-index不为auto的绝对/相对定位
- z-index不为auto的flex项目
- opacity小于1
- transform不为none
- position:fixed
以上是部分常用触发堆叠上下文，还有更多的不常用就不罗列了。
2.BFC
2.1.块格式化上下文
原文表述就算了，就是指，触发BFC后，子元素不会影响到父元素以外的元素。
触发BFC
- float不为none
- overflow不为auto,scroll,hidden
- display为table-cell,table-caption,inline-block
- position不为relative和static
2.2.有效的触发BFC
触发BFC的方式多半都有副作用
1.float布局：float后元素浮动，比较常用，到那时会导致父元素高度坍塌，需要clearfix弥补
2.position:absolute：绝对定位，父元素需要用相对定位
3.overflow:hidden：溢出的部分会被剪裁
4.display:inline-block：还是少用inline-block
综上，最实用的还是float+clearfix
3.IFC
3.1.内联格式化上下文
大概就是内联元素的高度是怎么计算的，极度坑爹。
3.2.各种高度
https://zhuanlan.zhihu.com/p/25808995
我实在解释不下去了，反正就是很坑爹，总结就是你别想对齐2种字体
3.3用处
我所知道IFC的一种用处就是让img的下面空白处消失。
